CSS3 box-shadow

CSS3 box-shadow 屬性可以用來設計網頁中各區塊的陰影效果，如 DIV、span、img 都能夠很輕鬆的設計出好看的陰影效果，至於為什麼會需要設計陰影呢？因為傳統的網頁設計比較單調，運用適當的 shadow 確實可以提升網頁整體質感，但也不宜運用過多，否則頁面混亂而失去品質，CSS box-shadow 的用法與 text-shadow 類似，不過 text-shadow 僅適用於文字陰影，box-shadow 則更適合用於區塊的設計。主流的瀏覽器如 FireFox、Chrome、Safari、Opera 等都有支援 box-shadow 屬性，而 IE9 以及更早的 IE 版本並未支援。

CSS3 box-shadow 基本語法

box-shadow:inset offset-x offset-y blur-radius spread-radius 陰影顏色;

與 text-shadow 比起來，box-shadow 可以設定的參數多了許多，可以呈現的結果也比較多樣化。

inset：用來設定內陰影，選擇性項目，無填寫代表呈現為外陰影。
offset-x：x 軸方向的陰影大小，單位為長度單位，如 em、px 等。
offset-y：y 軸方向的陰影大小，單位為長度單位，如 em、px 等。
blur-radius：模糊半徑，選擇性項目，未填寫則為預設值零。
spread-radius：擴散半徑，選擇性項目，未填寫則為預設值零。
陰影顏色：必要項目，自行決定陰影的顏色。

運用以上的各項參數去設計，以下準備幾的簡單的範例參考。

CSS3 box-shadow 範例一：簡易 DIV 陰影

範例呈現效果

CSS 陰影效果

為了讓範例呈現比較清楚一點，所以我們對 DIV 做了一點設計，包含寬度 width、line-height、text-align 等，但重點還是在於紅色標住的陰影設計，水平與垂直方向都給 3px 的距離，模糊範圍給 12px 的距離，就可以呈現出這樣的柔美效果。

CSS3 box-shadow 範例二：DIV 內陰影 inset

範例呈現效果

CSS 陰影效果

在 box-shadow 屬性的開頭加上 inset 的意思就是陰影效果為區塊內陰影，區塊外並不會有什麼效果出現，但區塊內就很漂亮。

CSS3 box-shadow 範例三：為圖片加上陰影效果

範例呈現效果

為圖片加上陰影也是相當的簡單，但不能設定圖片的內陰影，亦即 inset 在圖片上是沒有效果的。

推薦給您的相關主題