4.3 文本阴影

使用text-shadow属性可以为文本添加阴影效果，截至目前，Safari、Firefox、Chrome和Opera等主流浏览器都支持该功能。

4.3.1 定义text-shadow

text-shadow属性是在CSS2中定义的，在CSS2.1中被删除，在CSS3的Text模块中又恢复。基本语法如下：

    text-shadow: none | <length>{2,3} && <color>?

取值简单说明如下。


none：无阴影，为默认值。

<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值。

<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值。

<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许为负值。

<color>：设置对象阴影的颜色。


【示例】下面为段落文本定义一个简单的阴影效果，演示效果如图4.17所示。

图4.17 定义文本阴影

“text-shadow: 0.1em 0.1em #333;”声明了右下角文本阴影效果，如果把投影设置到左上角，则可以这样声明：

    p {text-shadow: -0.1em -0.1em #333;}

效果如图4.18所示。

图4.18 定义左上角阴影

同理，如果设置阴影在文本的左下角，则可以设置如下样式：

    p {text-shadow: -0.1em 0.1em #333;}

演示效果如图4.19所示。

图4.19 定义左下角阴影

也可以增加模糊效果的阴影，效果如图4.20所示。

    p{text-shadow: 0.1em 0.1em 0.3em #333;}

图4.20 增加模糊阴影

或者定义如下模糊阴影效果，效果如图4.21所示。

    p{text-shadow: 0.1em 0.1em 0.2em black;}

图4.21 定义模糊阴影

提示：在text-shadow属性的第一个值和第二个值中，正值偏右或偏下，负值偏左或偏上。在阴影偏移之后，可以指定一个模糊半径。模糊半径是个长度值，指出模糊效果的范围。如何计算模糊效果的具体算法并没有指定。在阴影效果的长度值之前或之后还可以选择指定一个颜色值。颜色值会被用作阴影效果的基础。如果没有指定颜色，那么将使用color属性值来替代。

4.3.2 案例：设计特效字

下面结合示例介绍如何灵活使用text-shadow属性设计特效文字效果。

【示例1】下面示例通过阴影把文本颜色与背景色区分开来，让字体看起来更清晰。代码如下，演示效果如图4.22所示。

图4.22 使用阴影增加前景色和背景色对比度

【示例2】下面示例演示了如何为红色文本定义3个不同颜色的阴影，演示效果如图4.23所示。

图4.23 定义多色阴影

当使用text-shadow属性定义多色阴影时，每个阴影效果必须指定阴影偏移，而模糊半径、阴影颜色是可选参数。

提示：text-shadow属性可以接受以逗号分隔的阴影效果列表，并应用到该元素的文本上。阴影效果按照给定的顺序应用，因此可能出现互相覆盖，但是它们永远不会覆盖文本本身。阴影效果不会改变框的尺寸，但可能延伸到它的边界之外。阴影效果的堆叠层次和元素本身的层次是一样的。

【示例3】下面示例演示把阴影设置到文本线框的外面。代码如下，演示效果如图4.24所示。

图4.24 将阴影设置到文本线框外面

【示例4】下面示例借助阴影效果列表机制，使用阴影叠加出燃烧的文字特效。代码如下，演示效果如图4.25所示。

图4.25 定义燃烧的文字特效

【示例5】text-shadow属性可以使用在:first-letter和:first-line伪元素上。同时，还可以利用该属性设计立体文本。使用阴影叠加出的立体文本特效代码如下，演示效果如图4.26所示。通过左上和右下各添加一个1px错位的补色阴影，营造出一种淡淡的立体效果。

图4.26 定义凸起的文字效果

【示例6】反向思维，利用示例5的设计思路，也可以设计一种凹体效果，设计方法就是把示例5中左上和右下阴影颜色颠倒即可。主要代码如下，演示效果如图4.27所示。

图4.27 定义凹下的文字效果

【示例7】使用text-shadow属性可以为文本描边，设计方法是分别为文本4个边添加1px的实体阴影。代码如下，演示效果如图4.28所示。

图4.28 定义描边文字效果

【示例8】设计阴影不发生位移，同时定义阴影模糊显示，这样就可以模拟出文字外发光效果。代码如下，演示效果如图4.29所示。

图4.29 定义外发光文字效果

上一章目录下一章