CSS3 陰影(text-shadow)
在以前，陰影效果一般都是做成圖片，現在有了CSS3 可以直接使用text-shadow 屬性來實現陰影。這個屬性可以有兩個作用，產生陰影和模糊主體。這樣在不需要圖片的情況下就能給文字增加質感。
基本語法：
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是： text-shadow:[顏色(Color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)],[顏色(color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)]... 或者 text-shadow:[x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)],[x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)]...
取值范圍：
<length>: 長度值，可以是負值。用來指定陰影的延伸距離。其中X offset是水平偏移值，Y Offset是垂直偏移值。
<color>: 指定陰影顏色，也可以是 rgba透明色
<shadow>: 陰影的模糊值，不可以是負值，用來指定模糊效果的作用距離。
如下圖所示：
簡單說明：
可以給一個對象應用一組或多組陰影效果，方式如前面的語法顯示一樣，用逗號隔開。text-shadow: X-Offset Y-Offset Blur Color 中X-Offset 表示陰影的水平偏移距離，其值為正值時陰影向右偏移，如果其值為負值時，陰影向左偏移； Y-Offset 是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移反之其值是負值時陰影向頂部偏移；Blur是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰。如果不需要陰影模糊可以將Blur值設置為0；Color是指陰影的顏色，其可以使用rgba色。
.demo
{
background: #666666;
width: 440px;
padding:30px;
font: bold 55px/100% "微軟雅黑", "Lucida Grande", Arial, Sans;
color: #fff;
text-transform: uppercase;
}
接下來我們在每個Demo上加上自己特定的樣式，分別如下所示：
.demo1
{
text-shadow: red 0 1px 0;
}
效果一： Glow and Extra Glow effect (也就是 NEON effect)
.demo1
{
text-shadow: 0 0 20px red;
}
輝光效果，我們設置比較大的模糊半徑來增強其輝光效果，你可以改變不同的模糊半徑來達到不同的效果，當然你也可以同時增加幾個不同的半徑值，創造多種不同的陰影效果。就如下面的NEON效果。
.demo1{text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;}
效果二：Stroke text effect
.demo1{text-shadow: 1px 1px 0 #f96, -1px -1px 0 #f96;}
描邊效果跟我們在Photoshop相比，效果差很多，出現斷點，但有時還是可以使用達到一種特殊的描邊效果，其主要運用兩個陰影，第一個向左上投影，而第二向右下投影，還需注意，制作描邊的陰影效果不適用模糊值。
效果三： 3D text effect
.demo1 {
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);
}
.demo1
{
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色效果更佳，如上面的實例。
使用text-shadow還可以設置出來很多的效果，在此不再一一敘述：詳情請參考下面的鏈接：
http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-text-shadow.html