消失的CSS3 box-shadow 屬性?

如果你在疑惑為什麼標題後面是個問號，因為我也不確定具體這個box-shadow屬性是否消失後就不再回來了。發生了什麼事？其實就是最近在看W3C關於css3的20091217文檔的時候發現box-shadow屬性已經沒有任何說明了，只留下這麼一段話：

This module previously defined a 『box-shadow』 property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.
以前這個模塊定義了一個『box-shadow』屬性。這個特性目前已從這個模塊中移除以做進一步的討論，並將會出現在別的 CSS 模塊中(或者更高版本的此模塊)在不久的將來。

你知道，在css3中box-shadow是一個非常好玩的屬性，被用得最廣泛的地方莫過於:focus後的input或者textarea，諸如本站的input和留言區域的textarea，你會發現在:focus的狀態時是加了box-shadow屬性的。如圖：
未激活狀態的textarea

激活狀態的textarea


當然在沒看W3C的文檔之前，我在別人的blog里看到的對於box-shadow的介紹發現內容都十分的陳舊了，大部分的對於shadow的定義都只是inset || [ <length> <length> <length>? || <color> ]而實際上其實是inset || [ <length> <length> <length>? <length>? || <color> ]。也就是有四個length可以定義。

在box-shadow沒被移除前的最近一個CSS3草案文檔(http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow)中是這樣定義的：

none | <shadow> [ <shadow> ]*

這裡被定義為：

<shadow> = inset? && [ <length>{2,4} && <color>? ]

前面兩個length長度取值對應著陰影在水平和豎直方向的位移。第三個length長度取值是模糊半徑。第四個length長度取值是傳播半徑，使用正數表示陰影擴大，使用負數表示影子縮小，而這個長度是相對於父元素的大小而言的。
而inset就是把原本投射在box外部的陰影投射到box裡面而實現的內陰影，用過一些作圖軟體的對於內陰影應該不陌生吧。

box-shadow屬性在不支持的瀏覽器上會優雅的降級。例如，在微軟IE8以下瀏覽器上看起來都是平淡無奇的盒子而沒有任何陰影效果。

當然前文介紹的《兩個 CSS3樣式可視化生成工具：CSS3 Please & CSS3 Generator》可以幫你更直觀的理解box-shadow這個屬性。

如果你希望更多的了解這個目前已經被W3C移除的屬性，可以繼續閱讀以下列表的文章：

• http://fredericiana.com/2009/06/12/shadow-boxing-with-moz-box-shadow/
• https://developer.mozilla.org/en/CSS/-moz-box-shadow
• http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow

不知道何時，W3C才會發布正式版的CSS3啊…

View Demo CSS3 box-shadow Demo