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
颜色：依样可以使用各种不同的表示方法

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

关注公众号『长空雪』

搬孕工 分享孕妇写真 关注我微信公众号 长空雪 “情而不色”是我公众号的风格