box-shadow属性的详细描述和兼容性测试

box-shadow是css3属性，用于向框添加一个或多个阴影，兼容ie9+以及火狐、chrome、opera等大部分主流浏览器。和PSD软件制作图片相比，box-shadow修改元素的阴影效果要简单得多，因为box-shadow可以修改六个参数，来获取不同的阴影显示效果。

在前面文章css3中的box-shadow(阴影)使用说明和兼容性问题已经做了阐述，有网友指出写的不够详细，下面是这个特别综合了常用的阴影案例对box-shadow属性进行演示说明，希望对这方面尤其欠缺的朋友补补脑。开始的部分咱们先讲一下如何使用box-shadow设置阴影效果，下面部分再综合理清如何在不同的浏览器中使用，做到所有主流浏览器兼容(IE下兼容)。

box-shadow语法：
box-shadow: h-shadow v-shadow blur spread color inset;
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] 阴影颜色 [投影方式]}
h-shadow：水平阴影的位置，正数则显示右侧阴影，负数显示左侧阴影。
v-shadow：垂直阴影的位置，正数则显示下侧阴影，负数显示上侧阴影。
blur：可选项，模糊距离，用来设置阴影边缘的模糊化程度。
spread：可选项，阴影的尺寸，可放大或缩小阴影的尺寸。
color：阴影的颜色，用来设置当前阴影的颜色。
inset：可选项，默认的阴影将外部阴影(outset)，添加此参数改为内部阴影。

1.水平阴影案例解析

水平阴影指的是水平向左或者向右的阴影，水平阴影的参数为正数则表示向右的水平阴影；水平阴影的参数为负数则表示向左的水平阴影；水平阴影的参数为0则表示没有水平阴影，下面是水平阴影的实际示例。

.shadow_horizontal_right{box-shadow:12px 0px #888;}.shadow_horizontal_center{box-shadow:0px 0px #888;}.shadow_horizontal_left{box-shadow:-12px 0px #888;}

提示：在CSS3中0px可以写成0，如box-shadow:0px 0px #888;何box-shadow:0 0 #888;是一样的

2.垂直阴影案例解析

垂直阴影指的是垂直向上或者向下的阴影，垂直阴影的参数为正数则表示向下的垂直阴影；垂直阴影的参数为负数则表示向上的垂直阴影；垂直阴影的参数为0则表示没有垂直阴影，下面是垂直阴影的实际示例。

.shadow_vertical_bottom{box-shadow:0px 12px #888;}.shadow_vertical_center{box-shadow:0px 0px #888;}.shadow_vertical_top{box-shadow:0px -12px #888;}

3.模糊距离的box-shadow阴影案例解析

.shadow_right_bottom_blur{box-shadow:12px 12px 5px #888;}.shadow_right_top_blur{box-shadow:12px -12px 5px #888;}.shadow_left_bottom_blur{box-shadow:-12px 12px 5px #888;}.shadow_left_top_blur{box-shadow:-12px -12px 5px #888;}

4.阴影尺寸的box-shadow阴影案例

.shadow_right_bottom_blur_spread_small{box-shadow:12px 12px 5px -10px #888;}.shadow_right_bottom_blur_spread{box-shadow:12px 12px 5px 0px #888;}.shadow_right_bottom_blur_spread_big{box-shadow:12px 12px 5px 10px #888;margin-bottom:40px;}

5.背景颜色的box-shadow阴影案例

.shadow_right_bottom_color_gray{box-shadow:12px 12px #888;}.shadow_right_bottom_color_green{box-shadow:12px 12px #6dffb8;}.shadow_right_bottom_color_red{box-shadow:12px 12px #ef6160;}

6.阴影透明度的box-shadow阴影示例

.shadow_blur_spread_rgba{box-shadow:0 0 5px 10px rgba(0,0,0,.1);}

提示：在CSS3中,rgba(0,0,0,1.0)为黑色和#000一样，rgba(255,255,255,1.0)为白色和#fff一样。

7.box-shadow兼容性讲解

上面写的box-shadow是在谷歌浏览器上使用的。正常情况下，我们要让box-whadow兼容绝大多数主流浏览器（包括IE浏览器），这里开创者素材给大家提供了兼容主流浏览器的代码。

.jianrong{-webkit-box-shadow: 0px 0px 20px #000;-moz-box-shadow: 0px 0px 20px #000;-o-box-shadow: 0px 0px 20px #000;box-shadow: 0px 0px 20px #000;-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;behavior: url(ie-css3.htc);/*兼容ie，加上这句*/}