CSS3 文本阴影 text-shadow属性

在CSS3之前，除非使用图片，否则无法给文本添加阴影效果。现在，使用text-shadow属性，可以为文本添加一个或多个阴影及模糊效果。语法格式为：

1. text-shadow: x-offset y-offset blur color;

各参数的含义见表表 3‑5：

表 3‑5 text-shadow属性的参数及含义

参数	含义
x-offset	必选参数，长度值，表示阴影在x轴的偏移量。可以是正值，也可以是负值。为正值时，阴影向右偏移，阴影在文本的右侧；为负值时，阴影向左偏移，阴影在文本的左侧
y-offset	必选参数，长度值，表示阴影在y轴的偏移量。可以是负值，也可以是负值。为正值时，阴影向下偏移，阴影在文本的下方；为负值时，阴影向上偏移，阴影在文本的上方
blur	可选参数，长度值，表示阴影的模糊距离，即阴影从开始变淡到完全消失的距离，不允许负值。值越大，阴影的边缘越模糊。如果不指定，则使用默认值0，表示不具有模糊效果
color	可选参数，表示阴影的颜色。如果不指定，则使用文本的颜色

不管是偏移，还是模糊，都不会改变元素本身的尺寸。因此，发生偏移、模糊后，阴影可能会超出元素本身，延伸到元素的边界之外。

除了单阴影外，还可以使用逗号分隔的阴影列表，为文本设置多重阴影效果。通过多重阴影的叠加，可以实现很多有趣的效果。如，word中的空心文字、阳文、阴文这些文本特效，都可以通过多重阴影来实现。

在文本的上、下、左、右四个方向各添加1px的黑色阴影，可以实现空心文字效果；在文本的左上和右下各添加 1px的错位补色阴影，可以实现阳文文字效果；把阳文的左上和右下的阴影颜色颠倒，即可实现阴文文字效果。CSS代码如下：

1. .stroke {
2. text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
3. }
4. .outset {
5. text-shadow: -1px -1px #fff, 1px 1px #333;
6. }
7. .inset {
8. text-shadow: 1px 1px #fff, -1px -1px #333;
9. }

在网页中，只需把这三种不同的阴影，应用到特定的文本，即可实现相应的文本特效。HTML代码如下：

1. class="stroke">空心文本

2. class="outset">阳文文本

3. class="inset">阴文文本

上述代码的运行效果如图 3‑22 所示：

图3-22 text-shadow属性效果

在指定文本阴影时，阴影的颜色可以接受任意合法的CSS颜色值，如预定义颜色名、十六进制数值、RGB值、RGB百分比、RGBA值、HSL值、HSLA值。

需要注意的是，浏览器必须同时支持RGB和HSL颜色模式，及 text-shadow属性，才能渲染出阴影效果。考虑到浏览器的兼容性，一般会这样声明：

1. text-shadow: 4px 4px #404442;
2. 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 上开源。