CSS3 box-shadow

CSS3 box-shadow 屬性可以用來設計網頁中各區塊的陰影效果,如 DIVspanimg 都能夠很輕鬆的設計出好看的陰影效果,至於為什麼會需要設計陰影呢?因為傳統的網頁設計比較單調,運用適當的 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 陰影
<div style="box-shadow:3px 3px 12px gold;width:200px;line-height:100px;text-align:center;">CSS 陰影效果</div>
範例呈現效果
CSS 陰影效果

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

CSS3 box-shadow 範例二:DIV 內陰影 inset
<div style="box-shadow:inset 3px 3px 12px gold;width:200px;line-height:100px;text-align:center;">CSS 陰影效果</div>
範例呈現效果
CSS 陰影效果
在 box-shadow 屬性的開頭加上 inset 的意思就是陰影效果為區塊內陰影,區塊外並不會有什麼效果出現,但區塊內就很漂亮。

CSS3 box-shadow 範例三:為圖片加上陰影效果
<img src="圖片網址" style="box-shadow:3px 3px 12px gold;padding:3px;">
範例呈現效果
為圖片加上陰影也是相當的簡單,但不能設定圖片的內陰影,亦即 inset 在圖片上是沒有效果的。

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