CSS3 text-shadow 基本語法
text-shadow: X 軸方向的陰影 Y 軸方向的陰影 模糊範圍 陰影顏色;
CSS3 text-shadow 的屬性共分為 X 軸方向的陰影、Y 軸方向的陰影、模糊範圍、陰影顏色這四個部分，每個部分由半形空白隔開，意思是可以分別設定文字在水平與垂直兩個方向的陰影，第三個＂模糊範圍＂是選填項目，但沒有設定的話，可能會比較不柔和，請自行比較看看哪個輸出結果比較符合網頁風格，前三個參數的單位為長度，可以是 em、px 等，最後一個陰影顏色也是必填項目。CSS3 text-shadow 範例
<font style="text-shadow:3px 3px 3px #cccccc;">CSS3 shadow 陰影效果</font>
呈現結果如：CSS3 shadow 陰影效果範例中我們將 X 軸、Y 軸以及陰影範圍都設定為 3px，顏色採用淺灰色（色碼為 #cccccc）所製做出來的柔和陰影效果，是不是比較有立體感了呢？這個特效在 IE9 以及更早版本的 IE 瀏覽器看不到。假設我們將第三個屬性取消掉，就會顯得比較粗糙一點，就像下面這樣。
<font style="text-shadow:3px 3px #cccccc;">CSS3 shadow 陰影效果</font>
呈現結果如：CSS3 shadow 陰影效果CSS3 text-shadow 範例二：暈染效果
<font style="text-shadow:0px 0px 15px #FF37FD;">CSS3 shadow 暈染陰影效果</font>
呈現結果如：CSS3 shadow 暈染陰影效果我們將 X 軸與 Y 軸方向陰影都先設為零，陰影範圍控制在 15px，顏色選擇淡紫色（色碼為 #FF37FD）就可以創造出這樣的暈染文字陰影效果，以往這樣的效果都必須在繪圖軟體先處理好，現在有了 CSS3 text-shadow 真的很方便，不過 text-shadow 僅能處理文字，若要處理區塊的陰影效果，請使用 CSS3 box-shadow 屬性。
推薦給您的相關主題