实现在 IE 下文字阴影效果

  用 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 就是强度。

» 订阅本站:http://feed.wange.im

本文已盖 18 层楼

  1. 回复 流年 说:

    这就是IE最恼人的地方了

  2. 回复 蛋卷 说:

    这个有意思我喜欢

  3. 回复 shamas 说:

    ie6下确实不好看

  4. 額 我竟然在Google上搜到了這篇文章!
    為了鄙視IE 我還是不加這個屬性了……

  5. 回复 短歌行 说:

    你别生气,这个阴影效果不是很好看哦 :lol:

  6. 回复 起衣 说:

    额...可是这个阴影效果...貌似不是很好看额...

  7. 回复 whisperer 说:

    用过filter:shadow ,没想到ff下页有shadow啊。。

  8. 回复 小明猪 说:

    直接用你自带的RSS重新订阅了,最近RSS扑街我真想砸了feedsky :oops:

  9. 回复 小明猪 说:

    囧,学习了,看来过段时间我也可以玩玩这个~ :cool:

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析