CSS3 shadow 陰影效果

CSS3 shadow 可以用來創造出陰影效果,適用於某區塊(如 DIVspanimg)或文字的陰影設計,省去傳統必須用圖檔先製作好陰影效果的工作,直接透過 CSS3 shadow 來完成,常用的兩種陰影效果可以分為 box-shadowtext-shadow,其中 box-shadow 用來設計單一區塊的陰影效果,而文字的陰影效果則透過 text-shadow 來設定,只不過目前的 IE 最新版本 IE8 並不支援 CSS3 shadow 特效,必須使用其他方式讓 IE 瀏覽器呈現效果,FireFox、Chrome、Safari、Opera 等瀏覽器是有支援的,以下提供兩個簡單範例參考。

一、CSS3 box-shadow 範例
<span style="box-shadow:3px 3px 5px 6px #cccccc;">CSS shadow 區塊陰影效果</span>
用 box-show 對 span 做陰影呈現效果如

CSS shadow 區塊陰影效果

CSS3 box-shadow 還可以對圖片或 DIV 區塊製作陰影效果,請參考:CSS3 box-shadow

二、CSS3 text-shadow 範例
<font style="text-shadow:2px 2px 2px #A8FF55;">CSS3 shadow 文字陰影效果</font>
用 text-shadow 對文字做陰影呈現效果如

CSS3 shadow 文字陰影效果

由此範例中,我們運用 text-shadow 技巧將文字增加了粉綠色的陰影效果,兩個範例比較後,可以看出對區塊做陰影的方式與對文字做陰影的方式雖然類似,但實際上並不相同,請參考詳細文字陰影解說:CSS3 text-shadow

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