IE10上的CSS3线性渐变

Question

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

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

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

Answer 1

您的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。

Answer 2

我在Windows 7中测试过IE10.0.9200.17148 modern.ie

并且background-image: 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%);有效。

如果您有IE10，请在此进行测试： https://fiddle.jshell.net/txLtok1w/1/

...并报告是否显示渐变，以及您的操作系统和IE版本/次要版本。