1

为了在 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 提供备用选项(使用上面提到的渐变过滤器)。

谢谢你。

4

2 回答 2

3

您可以使用 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;
于 2012-11-13T21:13:19.153 回答
1

试试这个网站

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

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

于 2012-04-18T14:45:40.600 回答