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