在CSS3之前，除非使用图片，否则无法给文本添加阴影效果。现在，使用text-shadow属性，可以为文本添加一个或多个阴影及模糊效果。语法格式为：
text-shadow: x-offset y-offset blur color;
各参数的含义见表表 3‑5：
不管是偏移，还是模糊，都不会改变元素本身的尺寸。因此，发生偏移、模糊后，阴影可能会超出元素本身，延伸到元素的边界之外。
除了单阴影外，还可以使用逗号分隔的阴影列表，为文本设置多重阴影效果。通过多重阴影的叠加，可以实现很多有趣的效果。如，word中的空心文字、阳文、阴文这些文本特效，都可以通过多重阴影来实现。
在文本的上、下、左、右四个方向各添加1px的黑色阴影，可以实现空心文字效果；在文本的左上和右下各添加 1px的错位补色阴影，可以实现阳文文字效果；把阳文的左上和右下的阴影颜色颠倒，即可实现阴文文字效果。CSS代码如下：
.stroke {text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;}.outset {text-shadow: -1px -1px #fff, 1px 1px #333;}.inset {text-shadow: 1px 1px #fff, -1px -1px #333;}
在网页中，只需把这三种不同的阴影，应用到特定的文本，即可实现相应的文本特效。HTML代码如下：
<p class="stroke">空心文本</p><p class="outset">阳文文本</p><p class="inset">阴文文本</p>
上述代码的运行效果如图 3‑22 所示：
图3-22 text-shadow属性效果
在指定文本阴影时，阴影的颜色可以接受任意合法的CSS颜色值，如预定义颜色名、十六进制数值、RGB值、RGB百分比、RGBA值、HSL值、HSLA值。
需要注意的是，浏览器必须同时支持RGB和HSL颜色模式，及 text-shadow属性，才能渲染出阴影效果。考虑到浏览器的兼容性，一般会这样声明：
text-shadow: 4px 4px #404442;text-shadow: 4px 4px hsl(140, 3%, 26%, 0.4);
也就是先定义一个使用十六进制颜色的阴影，作为对老浏览器的备用颜色。然后，再为现代浏览器定义一个使用RGBA、HSL和HSLA颜色的阴影。
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
