IE9 中伪元素的 CSS 渐变

发布于 2024-12-06 22:35:41 字数 204 浏览 0 评论 0原文

知道有人在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

树深时见影 2024-12-13 22:35:41

使用图像。
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.

百变从容 2024-12-13 22:35:41

通过设置负扩散半径,使用简单的盒子阴影可以达到几乎相同的效果。

inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]

CSS Shadow

示例:( http://jsbin.com/ekehoz/edit#html,live )

box-shadow: 0px -15px 30px -10px #888; 

The almost same effect is possible with a simple box-shadow by setting a negative spread-radius.

inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]

CSS Shadow

Example: ( http://jsbin.com/ekehoz/edit#html,live )

box-shadow: 0px -15px 30px -10px #888; 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文