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

CSS3 box-shadow 屬性自從推出後,讓許多網頁設計師都非常便利,因為傳統在設計網頁圖片陰影時會有一點麻煩,必須使用繪圖軟體特別替圖片增加陰影效果,做好的圖片若要修改陰影,又必須重新用繪圖軟體處理一次,所以現在新的設計手法就是直接採用 CSS3box-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 圖片語法
<img src="圖片網址" title="圖片標題" alt="圖片替代文字">
關於 HTML 的圖片標籤算是比較基本的語法,我們這裡就不多做介紹,請直接閱讀:HTML img 圖片標籤

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

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 2012~2016 Englsih version聯絡我們
PHP Smarty MySQL JQuery Apache W3C