IE3上的CSS3线性渐变

我们已决定终于支持Internet Explorer，但目前仅支持10.我一直在阅读关于IE浏览器的CSS支持，我不确定目前是否可以在IE中执行此操作？IE3上的CSS3线性渐变

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

有没有办法做到这一点，还是需要回落到PNG？

来源

2013-04-11 Jamie Turner

你试过了吗？你想让它看起来像什么？ – 2013-04-11 19:36:07

目前没有任何事情发生。只是空白。 – 2013-04-11 19:38:03

需要它看起来像一个阴影在左侧淡出。这是一个横向规则。 – 2013-04-11 19:39:09

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

来源

2013-04-11 19:43:59

谢谢。只需要我所需要知道的一切。所以回退到图像是IE10的唯一选择？ – 2013-04-11 19:44:59

不，'后退'不是方法。像@RowlandShaw用户问道：你想让它看起来像什么？ – 2013-04-11 19:51:02

在添加很多可能不需要的代码行之前（如渐变生成器所做的那样）http：//lea.verou。me/2013/04/can-we-get-rid-of-gradient-prefixes/ColorZilla非常适合初学者，但令人遗憾的是，它使它看起来像没有浏览器，但支持标准语法（你可以看到，如果你也选择生成评论）。这不是真的。当前版本的IE，FF，Opera和Chrome都支持前缀不固定。 – Ana 2013-04-11 20:35:41

我在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-gradient

如果你有一个IE10，这里测试： https://fiddle.jshell.net/txLtok1w/1/

...和你的操作系统和IE浏览器版本/次要版本报告梯度是否显示或不在一起。

来源

2015-05-06 09:15:00 lulalala

作品：Win 8.1，IE10 – lulalala 2015-05-06 09:15:57

IE3上的CSS3线性渐变

回答

相关问题