在CSS2中，如果想要實現文字的陰影效果，我們一般都是使用Photoshop等來實現。但是在CSS3中，這種效果用一個text-shadow屬性就能實現了。幾句代碼即可搞定，簡單好用。
語法：
text-shadow:x-offset y-offset blur color;
說明：
x-offset：（水平陰影）表示陰影的水平偏移距離，單位可以是px、em或者百分比等。如果值為正，則陰影向右偏移；如果值為負，則陰影向左偏移；
y-offset：（垂直陰影）表示陰影的垂直偏移距離，單位可以是px、em或者百分比等。如果值為正，則陰影向下偏移；如果值為負，則陰影向上偏移；
blur：（模糊距離）表示陰影的模糊程度，單位可以是px、em或者百分比等。blur值不能為負。如果值越大，則陰影越模糊；如果值越小，則陰影越清晰。當然，如果不需要陰影模糊效果，可以吧blur值設置為0；
color：（陰影的顏色）表示陰影的顏色，可以使用 學習網的“在線調色板”獲取。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-shadow屬性</title>
<style type="text/css">
#lvye
{
font-size:40px;
text-shadow:4px 4px 2px gray;
-webkit-text-shadow: 4px 4px 2px gray;
-moz-text-shadow: 4px 4px 2px gray;
}
</style>
</head>
<body>
<div id="lvye"> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
從上面的在線測試，我們可以得出以下結論：
（1）陰影偏移分為水平方向和垂直方向這2個方向，x-offset值指的是陰影到原文本的水平距離，y-offset值指的是陰影到原文本的垂直距離；
（2）x-offset與y-offset允許為負值；
（3）添加陰影偏移距離之後，可以指定一個模糊半徑blur。模糊半徑是一個長度值，表示陰影模糊效果的范圍；
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-shadow屬性</title>
<style type="text/css">
div
{
display:inline-block;
padding:20px;
font-size:40px;
font-family:Verdana;
font-weight:bold;
background-color:#CCC;
color:#ddd;
text-shadow:-1px 0 #333, /*向左陰影*/
0 -1px #333,/*向上陰影*/
1px 0 #333, /*向右陰影*/
0 1px #333 ;/*向下陰影*/
}
</style>
</head>
<body>
<div>helicopter</div>
</body>
</html>
在浏覽器預覽效果如下：
當然，為了表現更加豐富，每個方向上得陰影的顏色可以有不同的設置。如果將向左和向上的陰影顏色設置為白色，文字就會有凸起的效果。修改text-shadow屬性如下：
text-shadow:-1px 0 #FFF, /*向左陰影*/
0 -1px #FFF, /*向上陰影*/
1px 0 #333, /*向右陰影*/
0 1px #333; /*向下陰影*/
在浏覽器預覽效果如下：
如果將向右和向下的陰影顏色設置為白色，文字就會有凹陷的效果。修改text-shadow屬性如下：
text-shadow:-1px 0 #333, /*向左陰影*/
0 -1px #333, /*向上陰影*/
1px 0 #FFF, /*向右陰影*/
0 1px #FFF; /*向下陰影*/
在浏覽器預覽效果如下：
小伙伴們是不是覺得很神奇呢？當然在這裡，顏色的取值和陰影方向是很有技巧的，大家好好琢磨一下這些效果的代碼實現。
在CSS3中，可以使用text-shadow屬性來給文字指定多個陰影，並且針對每個陰影使用不同的顏色。也就是說，text-shadow屬性可以為一個以英文逗號隔開的“值列表”，如：
text-shadow:0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3;
當text-shadow屬性值為“值列表”時，陰影效果會按照給定的值順序應用到該元素的文本上，因此有可能出現互相覆蓋的現象。但是text-shadow屬性永遠不會覆蓋文本本身，陰影效果也不會改變邊框的尺寸。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-shadow屬性</title>
<style type="text/css">
#lvye
{
font-size:40px;
text-shadow:4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray;
-webkit-text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray;
-moz-text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray;
}
</style>
</head>
<body>
<div id="lvye"> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
下面，我們使用text-shadow屬性制作更為復雜的文本特效——火焰字。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-shadow屬性</title>
<style type="text/css">
p
{
text-align:center;
color:#45B823;
padding:20px 0 0 20px;
background-color:#FFF;
font-size:60px;
font-weight:bold;
text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
}
</style>
</head>
<body>
<p> 學習網</p>
</body>
</html>
在浏覽器預覽效果如下：
分析：
上面是使用text-shadow屬性制作的火焰字效果，相信小伙伴們又一次被CSS3效果給折服了吧。實現火焰字效果原理很簡單：text-shadow屬性取值使用“值列表”。但是呢，這些顏色和模糊半徑等的取值需要我們細心地一點點做測試才能最終做出這樣的效果，會比較費時間，但是這種炫麗的特性確實也是拿來裝逼的資本。
其實在第一章中，那個絢麗的CSS3動畫效果中就用到了指定多個陰影的text-shadow屬性。