CSS3 文本阴影 text-shadow属性

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

空心文本
阳文文本
阴文文本

上述代码的运行效果如图 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 上开源。

CSS3 文本阴影 text-shadow属性相关推荐

html页面下的阴影,html5/css3文本阴影(text-shadow)详解及示例
text-shadow属性用于设置文本内容的阴影效果或模糊效果.目前,text-shadow属性已经得到Safari浏览器.Firefox浏览器.Chrome浏览器和Opera浏览器的支持.IE8版本 ...
html字体投影效果,IE10中的CSS3文字阴影（text-shadow）属性
IE10浏览器在Windows开发者预览版中引入了支持硬件加速的CSS3文字阴影(text - shadow)属性.文字阴影是Web开发中最重要的需求功能之一.它使得以前在标准中难以实现的文字效果以更 ...
CSS3 Text Shadow
css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性: 语法: text-shadow:1px 2px 3px #FFF; text- ...
html文本阴影水平垂直,CSS中使用文本阴影与元素阴影效果
文本阴影介绍在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
文字在阴影层上面 css,CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)...
CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3) 是否可以使用CSS3在一个p-tag上应用两个文字阴影? 我想用1像素边框创建一个非常浅 ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
css3新增样式（文本效果--text-shadow 文本阴影）
text-shadow 文本阴影 text-shadow属性可以为文本添加一个或多个的阴影效果. 注意:多个阴影,指定用逗号分隔开来. 语法: text-shadow: h-shadow v- ...
html盒子阴影效果,CSS3给div或者文字添加阴影（盒子阴影、文本阴影的使用）
添加阴影效果以前只能使用图片来实现了,现在的css3功能非常的强大了,今天我们就一起来看关于CSS3给div或者文字添加阴影(盒子阴影.文本阴影的使用)的方法,具体的例子如下所示． CSS3定义了两种 ...
html+text+shadow语法,text-shadow属性怎么用
text-shadow属性用于为文本添加阴影效果,通过该属性我们可以设置水平或垂直阴影的位置,模糊距离及颜色. CSS3 text-shadow属性作用:向文本应用阴影. 说明:设置或检索对象中文本 ...

CSS3 文本阴影 text-shadow属性

CSS3 文本阴影 text-shadow属性相关推荐

最新文章

热门文章