CSS3 shadow 陰影效果

CSS3 shadow 可以用來創造出陰影效果，適用於某區塊（如 DIV、span、img）或文字的陰影設計，省去傳統必須用圖檔先製作好陰影效果的工作，直接透過 CSS3 shadow 來完成，常用的兩種陰影效果可以分為 box-shadow 與 text-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。

推薦給您的相關主題