13.5　为元素添加阴影

13.5　为元素添加阴影

使用text-shadow属性可以为元素中的文本添加阴影，使用box-shadow属性则可以为元素本身添加阴影，如图13-4所示。

图13-4　为元素添加阴影

text-shadow和box-shadow的基础属性集是相同的，不过box-shadow还允许使用两个可选的属性——inset关键词属性（设置内阴影）和spread属性（用于扩张或收缩阴影）。

尽管通常只对box-shadow属性使用4个值，实际上该属性接受6个值：带长度单位的x-offset和y-offset、可选的inset关键字、可选的带长度单位的blur radius和spread以及color。如果不指定blur radius和spread的值，则设为0。

box-shadow属性与text-shadow属性的另一个区别是，前者获得的支持更少，且需要针对某些浏览器版本使用厂商前缀。

box-shadow属性与text-shadow属性一样可以设置单个阴影和多重阴影，除此之外还可以设置内阴影，如图13-4所示，第一个元素有单个阴影，第二个元素有单个内阴影，第三个元素有多重阴影。

添加3个div元素，代码如下：

为class为shadow的div添加向右向下偏移2 px、模糊半径为5 px的黑色阴影，代码如下：

为class为inset-shadow的div的内部添加向右向下偏移2 px、模糊半径为10 px的黑色阴影，代码如下：

为class为multiple的div添加多重阴影，第一个阴影向右向下偏移2 px，无模糊半径，颜色为灰色，第二个阴影向右向下偏移6 px，模糊半径为2 px，颜色为橙色。