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


  • http://imbolo.com bolo

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

    • http://leeiio.me/ Leeiio

      @bolo 是啊,整个属性都给整没了。

  • http://www.eemir3.com/ Yacca

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

    • http://leeiio.me/ Leeiio

      @Yacca 是啊,不过还好是优雅的降级,不支持就完全没有效果,就不会造成混乱的样式了。

  • http://wange.im 万戈

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

  • http://rpsh.net 任平生

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

  • http://lync.in/ Justice

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

  • http://wanhe.56fix.org/ 万和热水器维修

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

  • http://www.zhcexo.com ZH CEXO

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

  • http://7-leaf.cn 叶子

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

    • http://leeiio.me/ Leeiio

      @叶子 叶子现在在上海么?

  • http://www.jutoy.net Jutoy

    哇,这个属性好玩 :idea:

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