internet-explorer - IE10 上的 CSS3 线性渐变

我们决定最终支持 Internet Explorer，但目前仅支持 10。我一直在阅读 IE 对 CSS 的支持，但我不确定目前是否可以在 IE 中执行此操作？

background: linear-gradient(bottom right,circle,rgba(0, 0, 0, .04),transparent 80px,transparent 100%);

无论如何要这样做还是仍然需要回退到png？

最佳答案

您的 OP 声明将不起作用。不，没有必要退回到图像。您的声明无效。解释你想在“线性”或“圆形”渐变之间做什么……或者只是去 http://www.colorzilla.com/gradient-editor/ 并重建你的线。

您正在寻找这样的东西(跨浏览器向后兼容):

.shadow {

background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.03) 31%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
}

jsFiddle with yours and mine 可以玩的地方

[发表笔记]

关于 IE:“过滤器”规则适用于 IE9-，IE10 预览版使用“-ms”前缀语法，IE10 以后使用标准语法。

有关详细信息，请参阅 linear-gradient page on MDN 。

关于internet-explorer - IE10 上的 CSS3 线性渐变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15957320/