用 CSS3 box-shadow 設計圖片陰影效果

CSS3 box-shadow 屬性自從推出後，讓許多網頁設計師都非常便利，因為傳統在設計網頁圖片陰影時會有一點麻煩，必須使用繪圖軟體特別替圖片增加陰影效果，做好的圖片若要修改陰影，又必須重新用繪圖軟體處理一次，所以現在新的設計手法就是直接採用 CSS3 的 box-shadow 屬性來處理，優點是設計速度快，可以隨時調整需要的陰影顏色、角度與範圍，很輕鬆就能設計出我們要的圖片陰影效果，我們先來看看這個 CSS3 box-shadow 屬性與 HTML 圖片的基本語法，接著在範例中把兩者結合看效果。

CSS3 box-shadow 屬性語法

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

各個參數的功能如下說明

inset：設定內陰影，選擇性項目，可將預設的外陰影改為內陰影。
offset-x：x 軸方向的陰影大小，單位為長度單位，如 em、px 等。
offset-y：y 軸方向的陰影大小，單位為長度單位，如 em、px 等。
blur-radius：模糊半徑，選擇性項目，預設值零。
spread-radius：擴散半徑，選擇性項目，預設值零。
陰影顏色：必要項目，自行決定陰影的顏色，可由色碼表挑選顏色。

光看這些參數功能有點複雜，詳細用法可以參閱我們《CSS3 box-shadow》篇的介紹。

HTML img 圖片語法

關於 HTML 的圖片標籤算是比較基本的語法，我們這裡就不多做介紹，請直接閱讀：HTML img 圖片標籤。

用 CSS3 box-shadow 設計圖片陰影效果範例

範例的效果

在範例中，我們利用 CSS3 的 box-shadow 屬性替這張 Logo 圖片增加了一些灰色的陰影效果，這裡用了「box-shadow:3px 3px 12px gray;」的意思就是 x 軸與 y 軸的陰影大小都是 3px，模糊半徑設定為 12px，顏色是灰色 gray，有沒有感覺到圖片似乎有點浮起來的立體視覺效果呢？適度的增加一些圖片陰影的確可以產生比較多層次感的效果，透過 CSS3 box-shadow 屬性來設計圖片陰影的確非常容易。

延伸閱讀