CSS文字阴影效果(各浏览器通用)



CSS文字阴影效果(各浏览器通用)

有时阿,在进行网页设计时,在一些标题或者是重点的地方,想要将那边的文字做些效果,一般作法就是字体加大、粗体、换颜色,不然就是加个斜体底线,如果想要更花俏的效果,例如:阴影、光晕等效果就得要把标题作成图片再贴图,可是这样的话,网页的开启速度就会受到影响,也许一个标题还好,但是如果整个网页都是这类型的话,累积下来还是很多的,另外也不利搜寻引擎收录网页内容,这也不大好,今天就来教大家如何用CSS语法让文字有阴影效果。
为什么还会有只有IE看的到跟只有Firefoxc和Google浏览器看的到的状况呢,这是因为这是分别套用了各自的CSS语法,所以会有这样的效果,下面就来分别解说各自的CSS语法吧

IE用:filter
IE的用法是使用以下参数
p.demoIE{
 filter:progid:DXImageTransform.Microsoft.Shadow(color='#FFFFFF',
Direction=135, Strength=3);
}

参数说明:
color:代表颜色,可用各种表示方式,例如red,#FF0000都是代表红色
Direction:角度,萤幕正上方为0度,右方是90度,下方是180度,左方则是270度
Strength:效果强度,单位是PX

小提醒:要套用滤镜的属性之前,你必须要先让那个物件有Layout属性,怎样让他有呢?可以给一个指定的height、width,或者是把position属性设定为absolute等。

Firefox、Google浏览器用:text-shadow
Firefox、Google浏览器的用法是使用以下参数
p.demoFF{
 text-shadow: 3px 3px 3px #FFFFFF;
}

参数说明:
第1个数字:X轴的位移,往右边是正的,往左边是负的
第2个数字:Y轴的位移,往上是正的,往下是负的
第3个数字:模糊的距离,单位是PX
颜色:依样可以使用各种不同的表示方法

如何,这样是不是就可以很简单的做出阴影效果,快又方便!但是这两个属性其实效果还是有所差别的,用的时候还是请斟酌使用,要记得个浏览器都检查过,不要某个浏览器很漂亮,另外一个浏览器却惨不忍睹,这样就不好罗。

提交评论

安全码
刷新

附加信息