IE10 上的 CSS3 线性渐变答案

【问题标题】：CSS3 Linear gradient on IE10IE10 上的 CSS3 线性渐变
【发布时间】：2017-06-01 10:24:25
【问题描述】：

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

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

有没有办法做到这一点，还是仍然需要退回到 png？

【问题讨论】：

你试过了吗？你希望它看起来像什么？
目前没有任何事情发生。只是空白。
需要它看起来像阴影在左侧淡出。这是一个水平规则。
这个问题没有显示任何研究工作；不清楚或没用。去那里 --> ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker
“注意发生”是因为代码。它是线性（咳咳，linear-gradient 部分）和径向渐变（circle 部分）之间的混合物，因此无法工作（另外，top right 是较旧的语法，当前使用 to 表示线性渐变和at 用于径向渐变）。 IE10 确实支持渐变，而且它实际上非常适合它们（渲染径向渐变比 FF 的 Chrome 更好，它是目前唯一可以动画渐变角度或颜色的浏览器）。那么...您想要线性渐变还是径向渐变？

标签： internet-explorer css internet-explorer-10

【解决方案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。

【讨论】：

不，'后备'不是办法。就像用户@RowlandShaw 询问的那样：您希望它看起来像什么？
在添加许多可能不需要的代码行之前（就像渐变生成器所做的那样）lea.verou.me/2013/04/can-we-get-rid-of-gradient-prefixes ColorZilla 非常适合初学者，但遗憾的是，它看起来好像还没有浏览器支持该标准语法（您可以看到，如果您还选择生成 cmets）。这不是真的。当前版本的 IE、FF、Opera 和 Chrome 都支持不带前缀的渐变。
如果有人像我一样偶然发现这一点，请注意 IE10 - 需要 - 以“-ms”为前缀的线性渐变。 IE9 可以没有，但 IE10 需要您的风格中的另一行。没有它，它将忽略您的其他声明。（至少，Win7版本的IE10可以）
更令人困惑的是，这篇博文表明 ie10 确实支持无前缀语法：blogs.msdn.com/b/ie/archive/2012/06/25/…
MSDN 博客条目不知何故消失了，这里是缓存页面：webcache.googleusercontent.com/…

【解决方案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 版本/次要版本。

【讨论】：