Question

如何获取跨浏览器文字（模糊）阴影？包括IE6,7,8。

有没有css或js解决方案？

我希望使用语义和有效标记来获取文本阴影。

Answer 1

jQuery Dropshadow plugin可以处理这个问题。要获得完全的浏览器兼容性，您将不得不使用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

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，可以使用像这样的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" />

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

3 个答案: