誰說不能用程式碼實現酷炫的文字特效？
初識text-shadow
text-shadow曾經在CSS2中就有出現過，只是後來被拋棄了，直到現在的CSS3中又把它重新撿了回來。這說明text-shadow這個屬性對於我們前端來說還是比較重要的。現在的很多專案中，CSS3的很多屬性都在被前端工程師使用，如下圖的這些效果就是通過text-shadow而得到的效果。
語法介紹
製作上述的圖例，我們第一個需要掌握的就是text-shadow的語法，具體的屬性書寫如下：
text-shadow: [x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)], [x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)]...;
實際書寫如圖所示：
text-shadow: X-Offset Y-Offset Blur Color;各屬性值的含義如下：
1、X-Offset表示陰影的水平偏移距離，其值為正值時，陰影向右偏移，如果其值為負值時，陰影向左偏移；
2、Y-Offset是指陰影的垂直偏移距離，其值為正值時，陰影向下偏移，如果其值是負值時，陰影向上偏移；
3、Blur是指陰影的模糊程度，其值不能是負值。如果值越大，陰影越模糊，反之陰影越清晰。如果不需要陰影模糊可以將Blur值設定為0；
4、Color是指陰影的顏色，可以使用rgba、顏色單詞等方式來書寫。
提示：可以給一個物件應用一組或多組陰影效果，方式如前面的語法顯示一樣，用逗號隔開。
詳細案例分析
把text-shadow運用好，也可以像Photoshop一樣製作出非常好的效果，下面就帶大家制作一些比較好看的例項以助於實際的開發使用。在製作之前大家先把下面的這段公共程式碼書寫下來。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>CSS3文字陰影</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <style type="text/css"> .wrap { width: 1000px; margin: 0 auto; } .wrap div { float: left; width: 400px; margin: 20px 20px 0 0; padding: 30px; color: #fff; background: #666666; font: bold 55px "微軟雅黑"; text-align: center; } </style> </head> <body> <div class="wrap clearfix"> <div>HTML5學堂</div> <div>HTML5學堂</div> <div>HTML5學堂</div> <div>HTML5學堂</div> <div>HTML5學堂</div> <div>HTML5學堂</div> <div>HTML5學堂</div> <div>HTML5學堂</div> <div>HTML5學堂</div> <div>HTML5學堂</div> <div>HTML5學堂</div> <div>HTML5學堂</div> </div> </body> </html>
1）文字發光
顧名思義，就是讓文字的四周出現一個光暈的效果。這個效果只需要改變不同的模糊值即可製作。如下：
.wrap div:nth-child(1) {
text-shadow: 0 0 20px red;
}效果如下：
發光效果，是通過設定比較大的模糊半徑來增加發光的，可以改變不同的模糊半徑值來達到不同的效果，當然你也可以同時增加幾個不同的半徑值，創造出多種不同的的陰影效果。類似如下寫法：
.wrap div:nth-child(2) {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de;
}效果如下：
2）Photoshop風格
這個風格的文字就是類似於投影與浮雕的效果，即通過更改X方向與Y方向的偏移值來實現。投影與浮雕的製作如下：
.wrap div:nth-child(3) {
color: #000;
text-shadow: 15px 15px 0 #999;
}
.wrap div:nth-child(4) {
color: #ccc;
text-shadow: -1px -1px 0 #fff,
1px 1px 0 #333,
1px 1px 0 #444;
}效果如下：
上圖中左側是投影效果，右側是浮雕效果，我想經常使用photoshop的人一定會比較熟悉。應用這兩個效果大家一定要注意，其模糊值一定要設定為0，使文字不具有任何模糊效果，主要是為了增加其質感。大家也可以像photoshop中製作一樣，改變不同的投光角度，從而製作出不同的效果，這裡就不在舉例子了，感興趣的人可以自己嘗試一下。
3）模糊文字
製作文字的朦朧效果主要就是藉助模糊值來實現的，如下：
.wrap div:nth-child(5) {
color: transparent;
text-shadow: 0 0 5px #f96;
}效果如下：
用text-shadow製作模糊的效果有兩個注意點，其一，使用transparent把文字的顏色設定為透明，如果模糊值越大，其效果越模糊。其二，不設定任何方向的偏移值，如上述的程式碼案例。
如果結合之前Photoshop風格中的浮雕效果，可以得到又一個不同的效果——帶有模糊的浮雕，如下：
.wrap div:nth-child(6) {
color: transparent;
text-shadow: 0 0 6px #f96,
-1px -1px #fff,
1px -1px #444;
}效果如下：
4）內陷文字
製作內陷文字需要考慮顏色搭配，這點十分重要，如果陰影色太亮看起來會很奇怪，如果太暗又沒有效果顯示，所以一個良好的配色是這個效果實現的關鍵，如下案例：
.wrap div:nth-child(7) {
color: #566F89;
background: #C5DFF8;
text-shadow: 1px 1px 0 #e4f1ff;
}效果如下：
通過上述例項，製作內陷文字只需要把文字的顏色設定得比背景色暗，陰影顏色給的比背景稍微亮一點點即可。這個內陷文字可以說是文字的影子，只需要設定一點點的偏移量就能給人一種微妙的突出效果，其具體的設定以及配色，大家可以自己去嘗試一下。
5）描邊效果
描邊效果就好比把一個硬幣放在白紙上，然後用筆去沿著硬幣邊緣畫出來的那個圈，把這個效果作用到文字中，如下：
.wrap div:nth-child(8) {
color: #fff;
text-shadow: 1px 1px 0 #f96,
-1px -1px 0 #f96;
}效果如下：
使用text-shadow製作描邊效果跟直接使用Photoshop相比，效果上會有點差別，因為程式碼實現的描邊主要運用的是兩個陰影，第一組值向左上投影，第二組值向右下投影，這時候在某些文字上可能會出現斷點。當然在使用上，還是可以使用這種寫法來達到所需要的特殊描邊效果的。但是有個注意點，製作描邊的陰影效果不設定模糊值。
6）3D文字
3D效果是視覺化程度最好的，能夠給人一個空間感。使用程式碼把文字也做出3D的效果，這就有點費勁了，一起看看吧~
.wrap div:nth-child(9) {
color: #fff;
text-shadow: 1px 1px rgba(197, 223, 248,0.8),
2px 2px rgba(197, 223, 248,0.8),
3px 3px rgba(197, 223, 248,0.8),
4px 4px rgba(197, 223, 248,0.8),
5px 5px rgba(197, 223, 248,0.8),
6px 6px rgba(197, 223, 248,0.8);
}效果如下：
上例是通過設定多組正向投影值，從而實現視覺上的3D效果。如果把投影的方向換一下，就又可以得到另外一種3D效果，如下：
.wrap div:nth-child(10) {
color: #fff;
text-shadow: -1px -1px rgba(197,223,248,0.8),
-2px -2px rgba(197,223,248,0.8),
-3px -3px rgba(197,223,248,0.8),
-4px -4px rgba(197,223,248,0.8),
-5px -5px rgba(197,223,248,0.8),
-6px -6px rgba(197,223,248,0.8);
}效果如下：
3D文字效果運用原理就是像Photoshop一樣，我們在文字的下方或上方複製了多個圖層，並把每一個層向左上或右下方向移動一個1px距離，從而製作出3D效果。同時我們層數越多，其越厚重。換成用text-shadow製作就是使用多個陰影，並把陰影色設定相同，給其使用rgba顏色效果較佳，如上面的例項。
7）復古風格
復古風格的文字也是需要考慮顏色搭配的一種製作方式，主要是為了陰影與背景的一個展示，如下：
.wrap div:nth-child(11) {
color: #eee;
text-shadow: 5px 5px 0 #666,
7px 7px 0 #eee;
}效果如下：
復古風格的文字效果是由兩個文字陰影合成的，這裡需要注意的是：第一個陰影色和背景色相同；文字顏色和第二個陰影色相同。
8）補色效果
所謂的補色效果，就是使用rgba來設定文字顏色和陰影，使得展示的文字看上去像一個影子。如下：
.wrap div:nth-child(12) {
color: rgba(255, 179, 140,0.5);
text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}效果如下：
這個文字效果是一種補色的效果，從而製作出一種三維效果圖。其效果是讓文字陰影和文字顏色都是使用不同的rgba色組合而成的，使底層的文字是通過影子可見的。
總結
8個文字陰影例項，只是特效文字的冰山一角。只有你想不到的，沒有你做不到的。CSS3的強大功能，讓樣式的地位今非昔比，它的出現，將網站中很多細節的實現變得更加方便快捷，可謂網站開發中“里程碑”式的飛躍。