2009/6/14

顛覆網路 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;

 

simple box shadow

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

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

 

inset box shadow

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

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

 

box shadow with spread radius

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

 

multiple box shadows

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

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

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

 

box shadow with RGBA

看不太出來?按一下加上背景圖應該會更明顯。圖片感謝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;

其他資訊

文件

範例

1 則留言:

  1. 那個彩虹實在是太酷了,沒想到還可以這樣搞 XD

    回覆刪除

歡迎留下您的意見