css box-shadow 產生陰影效果或光暈效果的特性

box-shadow: x y blur spread color inset;

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);

思考 - css box-shadow 輕鬆呈現質感好、多變化的陰影效果或光暈效果。

外陰影 (或外光暈) 會依據 border-box 來計算尺寸及位移，而內陰影 (或內光暈) 則依據 padding-box 來計算。

稍後會看到範例的語法，都有增加了前兩段 廠商專屬擴充特性 ，提供給部分瀏覽器未正式支援標準語法之前的較舊版本使用，加不加這段應視網站的適用領域，並不影響較新版瀏覽器，語法中以較淡色呈現。

• 前面有 -moz- 的：適用 firefox 等較舊版 Gecko 系列。
• 前面有 -webkit- 的：適用 safari , google chrome 等較舊版 webkit 系列。

每個範例的 css 都有指定相同的背景顏色、相同的 border 。

background:#def;
border:1px solid silver;
display:inline-block;
padding:0.5em 0.75em;

以下範例的每項主題都有加了對應的 css 效果， 沒看到應該有的效果？

至少需要 2 個尺寸值，先後表示陰影的「水平」 (x) 「垂直」 (y) 位移距離， 0 值表示沒有位移 (就是 box 的位置) 。

-moz-box-shadow:4px 4px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px rgba(20%,20%,40%,0.5);
            
box-shadow:
            4px 4px
             rgba(20%,20%,40%,0.5);

增加第 3 個尺寸值表示陰影的模糊強度 ( blur ) ，當然增加模糊度也會造成陰影更透明。

-moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
            
box-shadow:4px 4px 
            3px
             rgba(20%,20%,40%,0.5);

使用負數位移值，呈現不同方向的陰影。

-moz-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);
            
box-shadow:
            -4px -4px
             3px rgba(20%,20%,40%,0.5);

加第 4 個尺寸值，表示陰影的擴散強度 ( spread ) ，也可以強化像光暈的效果。

-moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
            
box-shadow:4px 4px 12px 
            4px
             rgba(20%,20%,40%,0.5);

使用負數 spread 值，像似縮減陰影周圍。

-moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
            
box-shadow:4px 4px 12px 
            -2px
             rgba(20%,20%,40%,0.5);

在最前或最尾加 inset 變成內陰影，可呈現凹入的視覺。

-moz-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);
            
box-shadow:
            inset
             3px 3px 3px rgba(20%,20%,40%,0.5);

內陰影加 spread 值，加強凹入的真實感。

-moz-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
-webkit-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
            
box-shadow:1px 1px 3px 
            2px
             rgba(20%,20%,40%,0.5) 
            inset
            ;

更逼真、更有深度感的陰影。

多層次陰影：一組以上數值，產生由前至後層疊的陰影，以 , (逗號) 分隔。當然陰影的透明顏色是會堆疊顏色的。

-moz-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);
-webkit-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:
            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)
            ;

有透明區域的圖片 ( img 元素) 定義 box-shadow ，當然會在整個 img 元素的 box (包括透明區域) 產生陰影。這個例子除了圖片加陰影，它的外層元素也指定了 inset 陰影，呈現更立體的視覺，語法內沒有寫出，請自行試試嘍。

-moz-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);
-webkit-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: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);

不同顏色交錯相疊的背影。

不同顏色的陰影，指定交錯的位移，也能呈現特別的視覺。陰影跨越到下方的元素也不會移動排版。

-moz-box-shadow:8px 24px 2px rgba(100%,0%,0%,0.4),16px -4px 2px rgba(0%,100%,0%,0.4),24px 12px 2px rgba(0%,0%,100%,0.4);
-webkit-box-shadow:8px 24px 2px rgba(100%,0%,0%,0.4),16px -4px 2px rgba(0%,100%,0%,0.4),24px 12px 2px rgba(0%,0%,100%,0.4);
            
box-shadow:
            8px 24px 2px rgba(100%,0%,0%,0.4)
            ,
            16px -4px 2px rgba(0%,100%,0%,0.4)
            ,
            24px 12px 2px rgba(0%,0%,100%,0.4)
            ;

內、外都加陰影，同一個元素就可以搞定。

-moz-box-shadow:6px 6px 6px rgba(20%,20%,40%,0.5),inset 1px 1px 4px 2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:6px 6px 6px rgba(20%,20%,40%,0.5),inset 1px 1px 4px 2px rgba(20%,20%,40%,0.5);
            
box-shadow:
            6px 6px 6px rgba(20%,20%,40%,0.5)
            ,
            inset
             1px 1px 4px 2px rgba(20%,20%,40%,0.5)
            ;

將 box-shadow 運用在像 :hover , :focus 之類具有使用者互動的指標 ( selectors ) ，也會有更多趣味的效果呈現，可以自行多嚐試嘍！

表格或表單控制元件在部分瀏覽器異常呈現

截至撰文時， safari 5 尚未支援 box-shadow 標準語法，必須使用前面提到的 -webkit- 語法。

雖說 box-shadow 可適用在全部元素，不過部分較特別的元素，如表格類、表單控制元件 ( controls ) ，在瀏覽器上會有不太正常的處理現象。撰文時，特別測試了一些提出來討論。

表格類

• 表格儲存格 (如 th , td ) ：如果在外層 table 元素指定了 border-collapse:collapse; 特性 (儲存格間沒空隙) ，在 ie 陰影沒效。
• 表格列 (如 tr ) ： 在 google chrome , oprea 陰影沒效；在 ie 陰影呈現在儲存格上。

表單控制元件 ( controls )瀏覽器有預設背景色的控制元件 (如 button , input ) ，在 ie , google chrome 須指定新的背景色，或背景透明才會有效。在 google chrome 需指定 box-shadow 的 color 值才會有效。