消失的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
消失的CSS3 box-shadow 属性
激活状态的textarea
消失的CSS3 box-shadow 属性

当然在没看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移除的属性,可以继续阅读以下列表的文章:

不知道何时,W3C才会发布正式版的CSS3啊…

View Demo CSS3 box-shadow Demo


13 Responses to 消失的CSS3 box-shadow 属性?

  1. bolo says:

    CSS3 很没有定下来嘛,有删改正常,不过把整个属性弄不见了的确难明白

  2. Yacca says:

    效果真好,不过在ie下就啥都没了…

  3. 万戈 says:

    我又新学会了一招box-shadow的玩法,试试去

  4. 任平生 says:

    应该还会加回来吧,这毕竟是草案

  5. Justice says:

    我觉得只是在达成共识之前藏了起来,这个属性目前几个浏览器的私有属性表现起来还是不太一致的。

  6. 呵呵,现在的浏览器标准真的不是很统一! ❗

  7. ZH CEXO says:

    两个草案,已经感觉大家都按捺不住了,可恨的W3C啊

  8. 葉子 says:

    我不做前端好多年,现在设计happy

  9. Jutoy says:

    哇,这个属性好玩 💡

  10. Pingback: 两个CSS3样式可视化生成工具:CSS3 Please & CSS3 Generator - IT牛人博客聚合

Leave a Reply

Your email address will not be published. Required fields are marked *