有時阿，在進行網頁設計時，在一些標題或者是重點的地方，想要將那邊的文字做些效果，一般作法就是字體加大、粗體、換顏色，不然就是加個斜體底線，如果想要更花俏的效果，例如 陰影、光暈等效果就得要把標題作成圖片再貼圖，可是這樣的話，網頁的開啟速度就會受到影響，也許一個標題還好，但是如果整個網頁都是這類型的話，累積下來還是很多的，另外也不利搜尋引擎收錄網頁內容，這也不大好，今天就來教大家如何用CSS語法讓文字有陰影效果，先來看個範例。
範例
文字陰影效果範例
這行只有IE看的到效果
這行只有Firefox、Google瀏覽器看的到效果
為什麼還會有只有IE看的到跟只有Firefoxc和Google瀏覽器看的到的狀況呢，這是因為這是分別套用了各自的CSS語法，所以會有這樣的效果，下面就來分別解說各自的CSS語法吧
IE用：filter
IE的用法是使用以下參數
p.demoIE{
filter:progid:DXImageTransform.Microsoft.Shadow(color='#333', Direction=135, Strength=3);
}
參數說明：
- color：代表顏色，可用各種表示方式，例如red，#FF0000都是代表紅色
- Direction：角度，螢幕正上方為0度，右方是90度，下方是180度，左方則是270度
- Strength：效果強度，單位是PX
小提醒：要套用濾鏡的屬性之前，你必須要先讓那個物件有Layout屬性，怎樣讓他有呢?可以給一個指定的height、width，或者是把position屬性設定為absolute等。
Firefox、Google瀏覽器用：text-shadow
Firefox、Google瀏覽器的用法是使用以下參數
p.demoFF{
text-shadow: 3px 3px 3px #333;
}
參數說明：
- 第1個數字：X軸的位移，往右邊是正的，往左邊是負的
- 第2個數字：Y軸的位移，往上是正的，往下是負的
- 第3個數字：模糊的距離，單位是PX
- 顏色：依樣可以使用各種不同的表示方法
如何，這樣是不是就可以很簡單的做出陰影效果，快又方便!但是這兩個屬性其實效果還是有所差別的，用的時候還是請斟酌使用，要記得個瀏覽器都檢查過，不要某個瀏覽器很漂亮，另外一個瀏覽器卻慘不忍睹，這樣就不好囉。
Reference：Shadow Filter、text-shadow