text-shadow还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片，现在有了css3可以直接使用text-shadow属性来产生阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。

语法

这个语法非常简单，简单概括就是移动阴影的位置、阴影的大小和阴影的颜色。

text-shadow：x-offset y-offset blur color;

x-offset：（水平阴影）必选。表示阴影的水平偏移距离，单位可以是px、em或者百分比等。如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移；

y-offset：（垂直阴影）必选。表示阴影的垂直偏移距离，单位可以是px、em或者百分比等。如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移；

blur：（模糊距离）非必选。表示阴影的模糊程度，单位可以是px、em或者百分比等。blur值不能为负。如果值越大，则阴影越模糊；如果值越小，则阴影越清晰。当然，如果不需要阴影模糊效果，可以吧blur值设置为0；

color：（阴影的颜色）非必选。表示阴影的颜色，

这个属性有个特性，就是可以将效果进行叠加，以此来实现各种各样的文字效果。

案例

实现一个最简单的文字阴影，只需要设置偏移量、模糊度，以及阴影的颜色即可

只要设置这四个属性值，就能搭出想要的风格，以下是常用的风格。

是不是很方便呢，只需要一个属性就可以对所有文字进行批量美化，不用求着设计师帮忙p图[呲牙]。网页的夜视模式、科幻风也是用这个属性调出来的。

总结