“线性渐变”在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/