跨浏览器文本（模糊）阴影

Question

如何获得跨浏览器的文本（模糊）阴影？包括IE6、7、8。

有没有css或js解决方案？

我想获得具有语义和有效标记的文本阴影。

Answer 1

jQuery Dropshadow 插件 可以处理这个问题。
为了获得完全的浏览器兼容性，您必须使用 JavaScript，没有纯 CSS 解决方案。

Answer 2

此方法使用定位的 span 来实现外观。

http://krijnhoetmer.nl/stuff/javascript/text-shadow/

有可能是使用转换的纯 CSS 解决方案。

使用过滤器：

IE 6 支持过滤器，因此您可以使用：

filter: dropshadow(color=#ffff00,offX=5,offY=5);

因此跨浏览器样式可能如下所示：

.my-class 
{
    -ms-filter: "dropshadow(color=#ffff00,offX=5,offY=5)";
    filter: dropshadow(color=#ffff00,offX=5,offY=5);
    text-shadow: #ff0 5px 5px;
}

Answer 3

这是一个 Codepen 演示，它将向您展示如何创建文本模糊效果以及多种效果其他文字效果。

<div id="blurred">BLURRED</div>

blurred {
    text-shadow: 0px 0px 10px rgba(255,255,255,0.4),
    0px 0px 30px rgba(255,255,255,0.6),
    0px 0px 50px rgba(255,255,255,0.5),
    0px 0px 180px rgba(255,255,255,0.5);
    color: rgba(255,255,255,0);
}

---

对于旧版本的 Internet Explorer 版本 9，早至 5.5，您可以通过使用 IE 特定的 CSS 过滤器属性来生成模糊效果，如下所示

p { filter:Blur(Direction=45, Strength=8);height:40;width:400;font-size:20pt;font-weight:bold; }

对于较新版本的 IE，您可以指定它们回退到与此元的 IE9 兼容性价值。

<meta http-equiv="X-UA-Compatible" content="IE=9" />