- CSS3网页设计从入门到精通(微课精编版)
- 前端科技
- 1363字
- 2025-02-20 07:05:46
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 定义外发光文字效果