消失的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