IT兄弟连 HTML5教程 CSS3属性特效 盒模型阴影

除了为文字添加阴影，我们还可以为盒模型添加阴影。盒模型阴影的属性名称为box-shadow,此属性与text-shadow一样有4个值，前两个值分别表示水平方向位移距离和垂直方向的位移距离，第三个值表示阴影的模糊半径（包含0及以下的值均表示无模糊），最后一个则是阴影的颜色。前Chrome 16+，FireFox8+，Opera11.6+，Safari5.1+以及IE9+均可直接使用box-shadow，而不需要-webkit-诸如此类的前缀。

语法格式如下所示：

box-shadow:[inset] x y blur [spread] color

box-shadow的参数说明如表1所示。

表1  box-shadow参数说明

与文字阴影text-shaow的参数意义一致，横向偏移量和纵向偏移量可以为负值，代表盒模型阴影向左偏移或向上偏移。盒模型阴影也是可以叠加的。添加多层阴影用“，”隔开。阴影叠加是先渲染后面的再渲染前面的。

1．最简单的用法

box-shadow:2px 2px 20px #000;

此语法说明为一段文字设定横向偏移量为2px，纵向偏移量为2px，模糊距离为20px的黑色阴影。以下是一个单层阴影的例子。代码如下:

使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，我么可以看到box的外面增加了一层黑色的阴影，如图1所示。

图1  盒模型阴影

2．盒模型阴影投影方式

box-shadow: inset 2px 2px 20px #000;

此语法说明为盒模型嵌套一层内投影。横向偏移量为2px，纵向偏移量为2px，模糊距离为20px的黑色内投影。代码如下：

使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，盒模型被加上了内投影，如图2所示：

图2  盒模型内投影

3．盒模型阴影叠加

box-shadow: 2px 2px 20px green，inset 2px 2px 20px blue;

此语法说明为盒模型设定双层阴影。第一层为横向偏移量为2px，纵向偏移量为2px，模糊距离为20的向外的绿色阴影，第二层为横向偏移量为2px，纵向偏移量为2px，模糊距离为20px的蓝色内投影。代码如下：

使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，box被加上了两层阴影，其中有一层是内投影，如图3所示。

图3  盒模型阴影叠加