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

【问题标题】：cross-browser text (blur) shadow跨浏览器文本（模糊）阴影
【发布时间】：2010-03-17 15:25:36
【问题描述】：

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

有没有css或者js的解决方案？

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

【问题讨论】：

标签： javascript jquery css xhtml sifr

【解决方案1】：

jQuery Dropshadow plugin 可以处理这个问题。要获得完整的浏览器兼容性，您将不得不使用 JavaScript，没有纯 CSS 解决方案。

【讨论】：

【解决方案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;
}

【讨论】：

这是一个的解决方案，但是ie的阴影滤镜实在是太丑了，我宁愿睁大眼睛也不愿用它。

【解决方案3】：

Here is a Codepen demo 将向您展示如何创建文本模糊效果以及其他几种文本效果。

<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" />

【讨论】：