“線性漸變”在IE9和Safari中不起作用

Question

我嘗試將一種樣式應用於按鈕，但是這種樣式在Mozilla和Chrome上顯示良好，那么Safari和IE9並非如此。

這是css類：

#bt_D{
width:130px;
height:30px;
box-shadow:1px 2px 4px rgba(0,0,0,0.60);
font-size:12px;
background-image:linear-gradient(60deg, rgb(231,110,49), rgb(231,171,49));
border:1px solid rgb(180,180,180);
border-radius:5px;
float:right;
text-align:center;
vertical-align:middle;
}

但是，當我檢查按鈕時，我linear-gradient屬性的引號中發現了一個黃色的感嘆號，表示該屬性無法被瀏覽器識別（Safari或IE9）

有解決這個問題的主意嗎？

Answer 1

對於Safari，您必須添加定義的附加的，所謂的“供應商前綴”版本：

background-image: -webkit-linear-gradient(60deg, rgb(231,110,49), rgb(231,171,49));

對於IE9（不支持CSS漸變），您必須使用圖片作為后備圖片，無論是png / gif / jpg還是更好的SVG。

這是許多漸變生成器之一，也可以創建所需的SVG：

http://www.colorzilla.com/gradient-editor/