顛覆網路 35 天 (5a): -moz-box-shadow 方塊陰影

今天 (是昨天吧？對不起我富奸化了…) 討論的是 box-shadow 方塊陰影。box-shadow 是 CSS3 草案的一部份，Firefox 3.5 在此以 -moz-box-shadow 實驗性支援、待規格定案後則會繼續以 box-shadow 出現。這個特性可以繪製一個區塊的陰影，我們直接看幾個範例來說明。以下的範例都會先秀程式碼、接著是 Live demo、再為您提供 Mac OS X 上的螢幕截圖：

-moz-box-shadow: 1px 1px 10px #00f;

 

如你所見，頭兩個值是設定陰影位移點數，接著是柔邊、陰影色彩。事實上你還可以在最前面加上「inset」來製作內部陰影：

-moz-box-shadow: inset 1px 1px 10px #888;

 

接著，你還可以用第四個數值「延展距離」來調整陰影的大小，可以向外延展(正值)也可以向內縮減(負值)：

-moz-box-shadow: 0px 20px 10px -10px #888;

 

跟 text-shadow 一樣，這裡也可以設定多重陰影 (感謝 Markus Stange)：

-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

 

四層陰影疊起來，形成彩虹一般的效果。如同 text-shadow 一樣，Firefox 3.5 在這邊跟的是 CSS3 的規格，也就是先定義的陰影會放在最上層，在定義多層陰影時請記得這點。

最後一個範例裡，我們將色彩值以 RGBA 格式指定，這跟 RGB 方式類似、只是最後加上了代表可以製作半透明效果的 alpha channel 值。這個例子的透明度為 .5 (50%)：

-moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);

 

看不太出來？按一下加上背景圖應該會更明顯。圖片感謝eschipul提供，CC:by-sa。

相容性問題

box-shadow 算是草案中晚近出現的特性，瀏覽器的支援程度也不算很廣：

• Firefox 3.5，如本篇文章所說，以 -moz-box-shadow 的方式支援，同時也支援 inset 及延展距離。
• Safari 與 Firefox 類似、也以 -webkit-box-shadow 方式支援。4.0 版開始支援多重陰影，不過目前還不支援 inset 及延展距離。
• Opera 與 IE 目前則尚未支援，IE 有古早的 DropShadow 可以參考一下。

所以如果現在就要用，那最好把三條都列上去。下面這個範例可以讓支援此特性的瀏覽器都看得到效果，而不支援的也不過是以原本無陰影的面貌出現而已：

 -moz-box-shadow: 1px 1px 10px #00f;
 -webkit-box-shadow: 1px 1px 10px #00f;
 box-shadow: 1px 1px 10px #00f;

其他資訊

文件

• https://developer.mozilla.org/en/CSS/-moz-box-shadow
• http://dev.w3.org/csswg/css3-background/#the-box-shadow

範例

• http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
• http://www.css3.info/preview/box-shadow/
• http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html