CSS3技术添加了许多原本利用Photoshop中处理才能实现的效果。例如文本阴影、发光效果、凸起和凹陷等。今天我们就一起学习一个新的CSS3属性，这个属性的本质是为文本添加阴影，但是通过对该属性原理的理解并加以调整，可以对文本实现更多的特效。
承接文章：利用CSS3技术为溢出文本添加省略标记
技术等级：初级 | 适合前端开发的初学者阅读学习。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
本文涉及到的CSS属性包括：
ltext-shadow
一、认识text-shadow属性：
text-shadow作为一个CSS3的新属性，提供了为文本添加阴影的作用。首先先让我们一同来学习该属性的基本取值和基本用法。
文本阴影text-shadow的使用语法如下所示：
text-shadow：length1 length2 blur color
上述格式中，text-shadow属性的取值包括四个参数，这四个参数的含义分别如下：
length1,取值为整数或浮点数，可以为负值，需要带单位。表示文本阴影在水平方向上相对于文本本身的偏移距离。
length2, 取值为整数或浮点数，可以为负值，需要带单位。表示文本阴影在垂直方向上相对于文本本身的偏移距离。
blur, 取值为整数或浮点数，不可以为负值，需要带单位。表示文本阴影的模糊程度。
color,表示阴影的颜色。
在页面中设置一个<p></p>标记对，设置其class属性为box01，在内部书写任意文本。
<p class=”box01”>文本阴影属性</p>
为.box01容器设置文本阴影属性：水平偏移5px，垂直偏移5px，阴影模糊为3px，阴影颜色为#aaaaaa。
.box01{
font-size:36px;
color:#ff9900;
text-shadow:5px 5px 3px #aaaaaa;
}
最终的文本效果如下图所示。
文本的阴影效果
这个例子只是为了给大家讲清楚text-shadow属性的用法，从设计上来说并不美观，也没有什么CSS代码技巧。但是我们可以看出以下问题：
当水平偏移为正数时，阴影相对于文本向右偏移。
当垂直偏移为正数时，阴影相对于文本向下偏移。
同理，如果取负值的话，会向相反的方向发生偏移。
二、设置多个阴影效果：
属性text-shadow不仅能够为文本设置一个阴影，还可以为文本设置多个阴影，这要求多个阴影用逗号隔开。
利用text-shadow为文本设置多个阴影的语法格式如下：
text-shadow:length1 length2 blur color,
length1 length2 blur color,
length1 length2 blur color,
length1 length2 blur color;
从格式中可以看出，最多为文本设置四个阴影，这四个阴影表示文本上、下、左、右的四个方向。具体的方向由每组阴影中的length1和length2参数的取值正负而定。
三、实例1：描边文字。
在页面中设置一个<p></p>标记对，设置其class属性为box02，在内部书写任意文本。
<p class=”box02”>描边文字</p>
为.box02容器设置文本阴影属性：
.box02{
text-shadow: -1px 0 #333333,
0 -1px #333333,
1px 0 #333333,
0 1px #333333;
}
从本段代码中可以看出，四组阴影都省略了blur参数，即没有设置blur参数的取值，这时阴影的模糊程度是不模糊。
我们来共同分析这四组阴影的方向：
-1px 0 #333333,水平方向为负值，垂直方向不偏移。整体向左偏移。
0 -1px #333333,水平方向不偏移，垂直方向为负值。整体向上偏移。
1px 0 #333333,水平方向为正值，垂直方向不偏移。整体向右偏移。
0 1px #333333;水平方向不偏移，垂直方向为正值。整体向下偏移。
该实例的最终效果如下图所示。
实例1 描边文字的效果
四、实例2：凸起和凹陷文字。
在页面中设置一个<p></p>标记对，设置其class属性为box03，在内部书写任意文本。
<p class=”box03”>凸起文字</p>
为.box03容器设置文本阴影属性：
.box03{
text-shadow: -1px 0 #ffffff,
0 -1px #ffffff,
1px 0 #000000,
0 1px #000000;
}
从本段代码中可以看出，四个方向的阴影排列为：
白色阴影（#ffffff）分布在文本的左侧和上方。
黑色阴影（#000000）分布在文本的右侧和下方。
该实例的最终效果如下图所示。
实例2 凸起文字的效果
如果将这四个方向的阴影排列进行相反处理，即：
白色阴影（#ffffff）分布在文本的右侧和下方。
黑色阴影（#000000）分布在文本的左侧和上方。
则文本将变为凹陷效果，有兴趣的小伙伴们可以自行在电脑上尝试一下。
注意：由于这两个例子中都是用到了白色阴影，所以为了让白色能够被看到，需要将整个文档的颜色设置为灰色。如果再将文本自身的颜色也设置为与页面相同的灰色，效果会更明显。
body{background-color:#888888;}
.box03{color:#888888;}
五、实例3：发光文字。
在页面中设置一个<p></p>标记对，设置其class属性为box04，在内部书写任意文本。
<p class=”box04”>发光文字</p>
为.box04容器设置文本阴影属性：
.box04{
text-shadow: 0 0 10px #ffffff;
}
上述代码没有让文本的阴影进行任何偏移，即水平方向和垂直方向的偏移值都是0，只是为文本的阴影设置了一个10px的模糊程度，并将颜色设置为白色。这样会给人一种发白光的效果。
注意：由于这个例子中用到了白色阴影，为了让发光效果明显，最好将文档颜色设置为黑色。
body{background-color:#000000;}
该实例的最终效果如下图所示。
实例3 发光文字的效果
小海声明
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
文章预告
CSS3中有关文本的属性还包括新的服务器端字体，下一篇文章中，小海老师将为大家介绍丰富的文字样式效果。