大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS技巧 > CSS实现文字阴影效果(兼容)

CSS实现文字阴影效果(兼容)

关键词:文字阴影CSS兼容  阅读(761) 赞(43)

[摘要]文字阴影效果可以让网页效果更好 ,更富立体感,现在我们说一说如何才能实现文字阴影效果,而且让该效果兼容大多数浏览器!

在css3中已经有一个text-shadow属性专门来实现这个效果,不过目前只有Webkit (from Safari 3+,chrome), Opera 9.5, Firefox 3.1(pre-Alpha)等几个现代浏览器可以支持该属性,IE系的暂时无法实现该属性。

text-shadow的语法:

text-shadow:color length length length;

color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度阴影模糊半径

正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.

其中任意一个值可以为零也可为空(将做默认处理)

具体请参考:http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows

值得注意的是,text-shadow可以应用多组属性,也就是可以如下方法使用:

0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

下面看几个范例:(请使用Webkit (from Safari 3+,chrome), Opera 9.5, Firefox 3.1(pre-Alpha)浏览器运行查看效果。)



   提示:您可以先修改部分代码再运行

至于顽固的IE,只能用滤镜来实现类似效果了,下面也顺便介绍一下IE滤镜制作阴影。

IE滤镜的语法为:

filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
其中color为阴影颜色 direction为角度 strength为阴影距离

下面一样看个例子


   提示:您可以先修改部分代码再运行

可以看到效果比较差,只有在小字体的时候才能用下。另外要注意要是用滤镜的元素必须触发haslayout

最后把两个方案结合一下即可实现支持大部分浏览器的CSS阴影效果。


   提示:您可以先修改部分代码再运行




相关评论