CSS3新特性一览 10. 盒阴影

10. 盒阴影

box-shadow 属性可以对HTML元素添加阴影 而不用额外的标签或背景图片。类似text-shadow 属性，它增强设计的细节；而且因为它不影响内容的可读性，随意他可以是增加那种额外感觉/效果的一种很好的方法。

10to1 为它的导航背景和hover状态使用了box-shadow 属性.

10to1 为其导航区域增加的一个简单的阴影并将该属性应用于导航链接的hover效果:

#navigation {  
    -webkit-box-shadow: 0 0 10px #000;  
    -moz-box-shadow: 0 0 10px #000;  
    }  
    #navigation li a:hover,  
    #navigation li a:focus {  
    -webkit-box-shadow: 0 0 5px #111;  
    -moz-box-shadow: 0 0 5px #111;  
    }

box-shadow属性可以用多个值：水平偏移、垂直偏移、模糊半径、伸展半径和阴影颜色。水平和垂直偏移和阴影色使用的最多。

在一个Div上应用红色阴影，右边和下边偏移4px，无模糊，我们可以使用下面的代码：

Div {  
    -moz-box-shadow: 4px 4px 0 #f00;  
    -webkit-box-shadow: 4px 4px 0 #f00;  
    box-shadow: 4px 4px 0 #f00;  
    }

浏览器支持: box-shadow目前只有Webkit核心浏览器支持，但是即将发布的Firefox 3.5 也将提供很好的支持。