IE9中伪元素上的CSS渐变答案

【问题标题】：CSS gradient on a pseudo element in IE9IE9中伪元素上的CSS渐变
【发布时间】：2011-09-27 16:05:42
【问题描述】：

知道有人在 IE9 中为伪元素设置 CSS 渐变的解决方案吗？

这是我的方法：

过滤器似乎不适用于伪元素，或者我错过了什么？

【问题讨论】：

我知道什么是伪类。我不确定你所说的伪元素是什么意思。
"':before' 伪元素可用于在元素内容之前插入一些内容。"通过w3schools.com
@Peter Olson：伪元素是由浏览器创建和渲染的虚构元素，用于提供生成的内容或围绕现有内容的某些部分。它们纯粹是为了显示和样式目的——例如，你不会在 DOM 中找到它们。见w3.org/TR/css3-content/#pseudo-elements和w3.org/TR/css3-selectors/#pseudo-elements

【解决方案1】：

使用图片。 IE9 不支持 css 渐变（-ms- 前缀仅适用于 IE10），并且 dx 过滤器（您在示例代码中使用）对性能非常不利（并且有问题）。

或者，您可以使用画布呈现渐变，然后将该渐变设置为元素的 data-url 背景。

或者，您可能会使用 SVG 渐变背景，但是您需要将它们隐藏在其他浏览器中（好在，我们在 ie9 中仍然有条件 cmets）。请记住，他们也是buggy。但不像过滤器那样容易出错。

【讨论】：

很好的答案，虽然没有例子可以看。几个小时以来，我一直在尝试创建我想要的 svg。理想情况下，我可以得到一个简单的线性渐变，比如旋转 80 度，让它填充 100% 的宽度和高度，并将其设置为 base64 svg+xml 背景图像。我知道要问您这项工作需要做很多工作，但是您能否指出一些示例，或者至少为该解决方案的一部分提供一个示例。
@bodine 如果它仍然与您相关（将近一年后），这里是示例链接：我的旧minesweeper game，其中通过画布生成图块。

【解决方案2】：

通过设置一个负的传播半径，一个简单的盒子阴影可以实现几乎相同的效果。

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

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

【讨论】：