实现在 IE 下文字阴影效果

发布于：电脑网络, 精品推荐 3,408 次践踏

用 text-shadow 我实现了在 Firefox 和 Chrome 浏览器下的文字阴影效果，可唯一遗憾的就是 text-shadow 是 CSS 3.0 的属性，IE 还不能识别。昨天在逛朋友的 QQ 空间时无意中发现在 IE 浏览器下，他的留言板字体居然可以有阴影效果，用开发者工具一看才恍然大悟，原来是用 filter:shadow 滤镜实现的效果。只怪我脑子一直没有转过弯来，一心想着 text-shadow，把滤镜这一强大手法给忘了。

说干就干，经过一番测试，我就把滤镜用到了 IE 上，下面举例展示效果：

用 text-shadow 属性，仅在 Firefox 下文字有阴影效果

用 filter:shadow 滤镜，仅在 IE 下文字有阴影效果

同时应用 text-shadow 属性和 filter:shadow 滤镜，在 Firefox 和 IE 下文字都有阴影效果

再来介绍下 filter:shadow 滤镜，该滤镜作用与 Dropshadow 类似，也能使对象产生阴影效果，不同的是 shadow 可产生渐进效果，使阴影更显真实。其语法结构如下：

选择器{filter：shadow（Color=颜色值,Direction=数值,Strength=数值）}

其中，Color 用于设定阴影颜色；Direction 用于设定投影方向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方；Strength 就是强度。