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

CSS3 box-shadow 屬性語法各個參數的功能如下說明

• 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 屬性來設計圖片陰影的確非常容易。

延伸閱讀

• 用 CSS3 box-shadow 設計 DIV 區塊陰影效果
• CSS3 shadow 陰影效果
• CSS3 box-shadow
• CSS3 text-shadow 文字陰影效果
• CSS text-shadow 替 H1 標題加陰影

您可能會想看

• CSS Attribute Selectors 屬性選擇器
• 替 CSS span 區域增加陰影效果
• 用 CSS3 box-shadow 設計 DIV 區塊陰影效果
• CSS3 網頁背景淡出效果設計
• CSS3 網頁漸層背景顏色效果設計
• CSS3 Gradients 漸層效果
• CSS3 多重背景圖片設計
• 利用 CSS3 設計背景圖片自動縮放全螢幕展示效果
• CSS3 邊框設計
• CSS3 outline-offset 屬性

今日熱門文章

• 認識 PHP8 的基本結構與語法
• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法

即時熱門文章

• 認識 PHP8 的基本結構與語法
• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法