CSS3 text-shadow 文字陰影效果

CSS3 text-shadow 用來設計文字陰影效果,通常我們會用在網頁標題上,增加視覺效果,另外也可以用在一些藝術字型的設計,讓你不需要透過 GIMP 或 Photoshop 這類繪圖軟體也可以輕鬆做出 shadow 效果。text-shadow 獲得幾乎所有主流的瀏覽器支援,但在 IE9 及更早版本的 IE 瀏覽器並不支援 text-shadow 屬性,大部分主流瀏覽器如 FireFox、Chrome、Safari、Opera 等都有支援 CSS3 text-shadow 屬性。

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 屬性。

推薦給您的相關主題
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 2012~2016 Englsih version聯絡我們
PHP Smarty MySQL JQuery Apache W3C