- 說明：元素 ( elements ) 的 box 呈現陰影或光暈的效果。可指定陰影的位移距離、顏色、模糊程度、擴散程度，也支援內陰影，甚至多層次堆疊的陰影。運用這個 css level 3 ( css 3) 的特性 ( css property ) ，讓我們可以很輕鬆就能呈現迷人的視覺效果，而不需要煩瑣地一張一張製作圖片。更具意義的是，產生的陰影不會對版面編排造成影響。
- 適合：有 html 及 css 語法基礎概念者。
- 難度：
- 更新： 2011-06-16
- 支援： firefox , google chrome , opera , ie 9 (至撰文時) 。
-
標準語法
-
box-shadow: x y blur spread color inset; -
-
說明
-
- 共有 6 個特性值，每個值之間以至少一個半形空格間隔。預設值為
none(只有一個字) 。 - 前面 4 個都是尺寸值 ( length ，不接受 %) ，依序表示水平位移距離 (x) 、垂直位移距離 (y) 、模糊強度 ( blur ) 、擴散強度 ( spread ) ，不可被其它的值插進其間。
- 產生陰影，前 2 個位移值 (
x y) 為必要值，必須指定；其餘的值可不定義。 - 模糊 ( blur ) 及擴散 ( spread ) 強度預設值 (沒有定義時) 一般為 0 。模糊不能為負值。
- 第 5 個可指定陰影顏色 ( color ) ， css 合法的 顏色值 表示法都可以，顏色值放在位移值前面也可以。沒有定義會使用 (或 繼承 )
color特性指定的顏色值。 - 第 6 個可指定為內陰影 (
inset) ，改放在第 1 個位置也可以。沒有定義就是一般在外的陰影。 - 所有組合起來的值，可增加為多組，以 , (逗號) 分隔，依序表示由前至後堆疊的多層陰影。
- 適用元素：全部。
- 適用媒體： visual 。
- 不被繼承。
語法實例
- 共有 6 個特性值，每個值之間以至少一個半形空格間隔。預設值為
-
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); box-shadow:2px 2px 1px rgba(20%,20%,40%,0.5) inset; box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
-
接下來會有更多例子討論。
-
參考資源
-
-
box-shadow- w3c 官方文件 (英文) 。
-
扫一扫
901
到【灌水乐园】发言
思考 - css
box-shadow輕鬆呈現質感好、多變化的陰影效果或光暈效果。外陰影 (或外光暈) 會依據 border-box 來計算尺寸及位移，而內陰影 (或內光暈) 則依據 padding-box 來計算。
稍後會看到範例的語法，都有增加了前兩段 廠商專屬擴充特性 ，提供給部分瀏覽器未正式支援標準語法之前的較舊版本使用，加不加這段應視網站的適用領域，並不影響較新版瀏覽器，語法中以較淡色呈現。
-moz-的：適用 firefox 等較舊版 Gecko 系列。-webkit-的：適用 safari , google chrome 等較舊版 webkit 系列。每個範例的 css 都有指定相同的背景顏色、相同的-
border。以下範例的每項主題都有加了對應的 css 效果， 沒看到應該有的效果？
至少需要 2 個尺寸值，先後表示陰影的「水平」 (x) 「垂直」 (y) 位移距離， 0 值表示沒有位移 (就是 box 的位置) 。-
增加第 3 個尺寸值表示陰影的模糊強度 (
blur ) ，當然增加模糊度也會造成陰影更透明。
-
使用負數位移值，呈現不同方向的陰影。
-
加第 4 個尺寸值，表示陰影的擴散強度 (
spread ) ，也可以強化像光暈的效果。
-
使用負數
spread 值，像似縮減陰影周圍。
-
在最前或最尾加
-
內陰影加
spread 值，加強凹入的真實感。
-
更逼真、更有深度感的陰影。
-
-
-
-
不同顏色交錯相疊的背影。
-
-
內、外都加陰影，同一個元素就可以搞定。
-
inset變成內陰影，可呈現凹入的視覺。多層次陰影：一組以上數值，產生由前至後層疊的陰影，以 , (逗號) 分隔。當然陰影的透明顏色是會堆疊顏色的。
有透明區域的圖片 (
img元素) 定義box-shadow，當然會在整個img元素的 box (包括透明區域) 產生陰影。這個例子除了圖片加陰影，它的外層元素也指定了inset陰影，呈現更立體的視覺，語法內沒有寫出，請自行試試嘍。不同顏色的陰影，指定交錯的位移，也能呈現特別的視覺。陰影跨越到下方的元素也不會移動排版。
將
box-shadow運用在像:hover,:focus之類具有使用者互動的指標 ( selectors ) ，也會有更多趣味的效果呈現，可以自行多嚐試嘍！表格或表單控制元件在部分瀏覽器異常呈現
截至撰文時， safari 5 尚未支援
box-shadow標準語法，必須使用前面提到的-webkit-語法。雖說
box-shadow可適用在全部元素，不過部分較特別的元素，如表格類、表單控制元件 ( controls ) ，在瀏覽器上會有不太正常的處理現象。撰文時，特別測試了一些提出來討論。表格類-
- 表格儲存格 (如
- 表格列 (如
表單控制元件 (
controls )
-
瀏覽器有預設背景色的控制元件 (如
在
google chrome 需指定
th,td) ：如果在外層table元素指定了border-collapse:collapse;特性 (儲存格間沒空隙) ，在 ie 陰影沒效。tr) ： 在 google chrome , oprea 陰影沒效；在 ie 陰影呈現在儲存格上。button,input) ，在 ie , google chrome 須指定新的背景色，或背景透明才會有效。box-shadow的color值才會有效。