CSS3 shadow 可以用來創造出陰影效果，適用於某區塊（如 DIV、span、img）或文字的陰影設計，省去傳統必須用圖檔先製作好陰影效果的工作，直接透過 CSS3 shadow 來完成，常用的兩種陰影效果可以分為 box-shadow 與 text-shadow，其中 box-shadow 用來設計單一區塊的陰影效果，而文字的陰影效果則透過 text-shadow 來設定，只不過目前的 IE 最新版本 IE8 並不支援 CSS3 shadow 特效，必須使用其他方式讓 IE 瀏覽器呈現效果，FireFox、Chrome、Safari、Opera 等瀏覽器是有支援的，以下提供兩個簡單範例參考。

一、CSS3 box-shadow 範例用 box-show 對 span 做陰影呈現效果如

CSS shadow 區塊陰影效果

CSS3 box-shadow 還可以對圖片或 DIV 區塊製作陰影效果，請參考：CSS3 box-shadow。

二、CSS3 text-shadow 範例用 text-shadow 對文字做陰影呈現效果如

CSS3 shadow 文字陰影效果

由此範例中，我們運用 text-shadow 技巧將文字增加了粉綠色的陰影效果，兩個範例比較後，可以看出對區塊做陰影的方式與對文字做陰影的方式雖然類似，但實際上並不相同，請參考詳細文字陰影解說：CSS3 text-shadow。

推薦給您的相關主題

• CSS3 text-shadow 文字陰影效果
• CSS3 box-shadow
• CSS DIV 區塊標籤的使用教學
• CSS span 標籤用法介紹
• HTML img 圖片標籤

您可能會想看

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

今日熱門文章

• 認識 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 等於昨天的條件判斷寫法