揭秘CSS(第 1 版)
3.2.10 文本阴影
阅读(

概述

CSS选择器

字体和文本

字体

文本

文本装饰

文本转换

单词间距

字符间距

垂直对齐

行高

水平对齐

水平对齐

文本缩进

文本阴影

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

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代码如下:

.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 所示:

text-shadow属性效果
图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 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验