css - 过滤器的替代品是什么：progid:DXImageTransform.Microsoft.gradient

Question

为了在 Internet Explorer 中创建渐变，我在我的 CSS (CSS3) 文件中使用了以下内容：

filter: progid:DXImageTransform.Microsoft.gradient

例如

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C4D5FB', endColorstr='#DAE6FB'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#C4D5FB), to(#DAE6FB)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #C4D5FB,  #DAE6FB); /* for firefox 3.6+ */

我刚刚读到它自 Internet Explorer 9 以来已被弃用，但仍然有效。使用它安全吗？有替代品吗？

根据： internet-explorer-9-gradients-with-rounded-corners

使用它是安全的：

Ultimate CSS Gradient Generator 之类的工具可以生成可爱的 CSS3 渐变所需的代码，并为旧版 Internet Explorer 提供备用选项（使用上面提到的渐变过滤器）。

谢谢你。

Answer 1

您可以使用 box-shadow 的插图来绕过渐变。我遇到了这个问题，只是无法让它工作。所以我看到了这篇文章http://www.sitepoint.com/shadow-boxing-image-free-css3-glossy-buttons/。对我来说效果很好。

这是我在项目中使用的代码。

border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, .2), 0px 0px 3px rgba(0, 0, 0, .1), inset 0px 5px 12px #930, inset 0px 15px 2px rgba(240, 150, 69, .5),inset 0px 25px 25px #930;

Answer 2

试试这个网站

http://www.colorzilla.com/gradient-editor/

选中 IE9 支持框。它将为您提供 SVG 解决方案。