IE9 中伪元素的 CSS 渐变
知道有人在 IE9 中的伪元素上设置 CSS 渐变的解决方案吗?
这是我的方法:
http://jsbin.com/iquhut/edit#html,live
过滤器似乎不适用于伪元素,或者我错过了一些东西?
Knows someone a solution for setting a CSS gradient on a pseudo element in IE9?
This is my approach:
http://jsbin.com/iquhut/edit#html,live
It seems like filter does not apply on pseudo elements or I missed something out?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
使用图像。
IE9 不支持 css 渐变(-ms- 前缀仅适用于 IE10),并且 dx 过滤器(您在 exapmle 代码中使用)对性能非常不利(并且有错误)。
或者,您可以使用 canvas 渲染渐变,然后将该渐变设置为元素的 data-url 背景。
或者,您可以使用 SVG 渐变背景,但随后您需要对其他浏览器隐藏它们(好消息,我们在 ie9 中仍然有条件注释)。请记住,它们也有有缺陷。但不像过滤器那样有缺陷。
Use images.
IE9 does not support css gradients (-ms- prefix works for IE10 only), and dx filters (which you used in exapmle code) are very bad for performance (and buggy).
Alternatively, you can use canvas to render gradient, and then set that gradient as data-url background for your element.
Alternatively, you might use SVG gradient backgrounds, but then you will need to hide them from other browsers (good thing, we still have conditional comments in ie9). Keep in mind they are buggy too. But not as buggy as filters.
通过设置负扩散半径,使用简单的盒子阴影可以达到几乎相同的效果。
示例:( http://jsbin.com/ekehoz/edit#html,live )
The almost same effect is possible with a simple box-shadow by setting a negative spread-radius.
Example: ( http://jsbin.com/ekehoz/edit#html,live )