阴影
在网页制作中，经常需要对盒子添加阴影效果。使用CSS3中的box-shadow属性可以轻松实现阴影的添加，其基本语法格式如下。
box-shadow: h-shadow v-shadow blur spread color outset;在上面的语法格式中，box-shadow属性共包含6个参数值，如表1所示。
表1 box-shadow属性参数值
| 参数值 | 描述 |
|---|---|
| h-shadow | 表示水平阴影的位置，可以为负值（必选属性） |
| v-shadow | 表示垂直阴影的位置，可以为负值（必选属性） |
| blur | 阴影模糊半径（可选属性） |
| spread | 阴影扩展半径，不能为负值（可选属性） |
| color | 阴影颜色（可选属性） |
| outset/ inset | 默认为外阴影/内阴影（可选属性） |
表1列举了box-shadow属性参数值，其中“h-shadow”和“v-shadow”为必选参数值不可以省略，其余为可选参数值。其中，“阴影类型”默认“outset”更改为“inset”后，阴影类型则变为内阴影。示例代码如下：
1 <title>box-shadow属性</title>
2 <style type="text/css">
3 img{
4 padding:20px; /*内边距20px*/
5 border-radius:50%; /*将图像设置为圆形效果*/
6 border:1px solid #666;
7 box-shadow:5px 5px 10px 2px #999 inset;
8 }
9 </style>第7行代码给图像添加了内阴影样式。需要注意的是，使用内阴影时须配合内边距属性padding，让图像和阴影之间拉开一定的距离，不然图片会将内阴影遮挡。运行示例代码效果如图1所示。
图1 box-shadow属性的使用
值得一提的是，同text-shadow属性（文字阴影属性）一样，box-shadow属性也可以改变阴影的投射方向以及添加多重阴影效果，示例代码如下。
box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #73AFEC inset;示例代码对应效果如图2所示。
图2 多重内阴影的使用
点击此处
隐藏目录
隐藏目录
