text-shadow:為字體添加陰影, 可以通過對text-shadow屬性設置相關的屬性值，來實現現一些需要的字體陰影效果,減少了圖片的使用。
基礎說明：
text-shadow: X軸 Y軸 Rpx color;
屬性說明（順序依次對應）： 陰影的X軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值（大小） 陰影的顏色
注（PS）：此屬性使用於文字陰影，而不是對盒模型進行操作 如果設置盒模型陰影請參考知識點:box-shadow（同理）
IE下使用濾鏡filter:shadow()
和box-shadow一樣都是css3新增的屬性，為了兼容各主流瀏覽器並支持這些主瀏覽器的較低版本，基於主流瀏覽器上使用text-shadow屬性時，我們需要將屬性的名稱前面加上前綴 谷歌和蘋果瀏覽器-webkit-text-shadow的形式。
Firefox瀏覽器則需要寫成-moz-text-shadow的形 歐朋瀏覽器 -o-text-shadow IE>9 -ms-text-shadow
樣例：
-webkit-text-shadow:0 0 10px #c06;
-moz-text-shadow:0 0 10px #C06;
-o-text-shadow:0 0 10px #C06;
text-shadow:0 0 10px #c06;
filter: Shadow(Color='green', Direction='135', Strength='6')/*Color設置陰影顏色 Direction陰影的方向，取值為0即零度（表示向上方向），45為右上，90為右，135為右下，180為下方，225為左下方，270為左方，315為左上方； Strength就是 范圍，類似於text-shadow中的模糊半徑值*/
/* filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true'); */
基礎練習：(借鑒字體形式展示)
一、常見形式：
<style type="text/css">
.pubdemo{ width: 320px; margin: 20px; padding:20px; font: bold 50px/100% "微軟雅黑"; border:1px solid red}
.demo1{ text-shadow: 0px 0 8px #F00} .demo2{ text-shadow: 5px 5px 8px #F00}
.demo3{ text-shadow: -5px -5px 8px #F00}
.demo4{ filter:shadow(Color=#f00000,Direction=45,Strength=8);}
</style>
<!--1、沒有給其X軸與Y軸設置值 所在會在本身發生作用 模糊半徑范圍，顏色-->
<p class="pubdemo demo1">text-shadow</p>
<!--2、 X軸與Y軸改變了正值（正值 向右 向下） 所以變成了這樣-->
<p class="pubdemo demo2">text-shadow2</p>
<!--3、 X軸與Y軸改變成了負值（負值 向左 向上） 所以變成了這樣-->
<p class="pubdemo demo3">text-shadow3</p>
注意，正值使陰影往右/下移動，負值往左/上移動
<!--4、 IE瀏覽器下-->
<p class="pubdemo demo4">text-shadow3</p>
二、四個角（）陰影：
<style type="text/css">
*{ padding:0; margin:0}
.pubjiao{ width: 350px; margin: 20px; font-size:20px; font-weight:bold; border:1px solid red }
.pubjiao div{ float: left; width:140px; padding:10px; border:1px solid green}
</style>
<div class="pubjiao">
左上角： text-shadow:-4px -4px 1px green;
左下角： text-shadow:-4px 4px 1px green;
右上角： text-shadow:4px -4px 1px green;
右下角： text-shadow:4px -4px 1px green;
</div>
三、多陰影----加邊例子（逗號隔開） 不明顯：
.kind1{ text-shadow: 0px 0px 2px green,
0px 0px 3px blue,
0px 0px 4px red;
font-size:38px; color:yellow; }
四、自定義陰影-根據個人喜好所以制作
1、類似於火焰
<style type="text/css">
.fire{ font-size:40px; font-weight:bold; background:#000; text-align:center; padding:24px;
text-shadow:0 0 4px white,
0 -5px 4px #ff3,
3px -10px 6px #fd3,
-3px -15px 11px #C90,
3px -25px 18px #f20;
/* 4px -35px 28px #C30;*/
}
</style>
<p class="pubsty fire">淡然</p>
2、3D
<p class="pubsty threeD">淡然</p>
.threeD{ color:#fff; text-shadow: 0 0 1px #999,
1px 1px 2px #888,
2px 2px 2px #777,
3px 3px 2px #666,
4px 4px 2px #555,
5px 5px 2px #333;
}
3、等等多種（后期在新增）......
百變不離其宗，練習就能熟悉，懂了就知道原理,隨意改寫，在配合css3的動畫效果， 閃光層（字）都很簡單實現。。希望對你有幫助。。