CSS实现跨浏览器的box-shadow盒阴影效果
在前端开发中，通过CSS的box-shadow属性可以给元素添加盒阴影效果来美化页面。但是，在不同的浏览器中，box-shadow的效果可能会有所差别，这就需要我们写出跨浏览器的box-shadow样式。
box-shadow属性介绍
box-shadow属性用于在元素周围创建一个或多个阴影。它具有以下几个常用参数：
（1）h-shadow：水平阴影的位置，可以是正负值。如果值为正，则阴影位于盒子右侧；如果值为负，则阴影位于盒子左侧。如果没有指定该值，则默认为0。
（2）v-shadow：垂直阴影的位置，可以是正负值。如果值为正，则阴影位于盒子下方；如果值为负，则阴影位于盒子上方。如果没有指定该值，则默认为0。
（3）blur-radius：模糊半径，模糊半径越大，阴影就越模糊，可以是0表示无模糊。
（4）spread-radius：阴影扩展半径，正值表示阴影扩展，负值表示阴影收缩。
（5）color：阴影的颜色，可以接受rgba()、rgb()和十六进制值等多种格式的颜色。
box-shadow的跨浏览器实现
为了实现跨浏览器的box-shadow效果，我们需要使用CSS3的新特性以及相关的hack技巧。
（1）设置box-shadow前缀
为了实现在不同浏览器中均正确显示box-shadow样式，我们需要在样式表中添加多个具有不同前缀的box-shadow规则。例如：
/* Firefox 4.0+ */
-moz-box-shadow: 2px 2px 2px #ccc;
/* Safari 和 Chrome */
-webkit-box-shadow: 2px 2px 2px #ccc;
/* Opera */
box-shadow: 2px 2px 2px #ccc;
注意，按照各浏览器的标准，box-shadow属性应当放在最后，这么做的原因是为了浏览器在遇到不能识别的其他属性时，在解析盒子阴影前就能确定不支持此元素的box-shadow属性。
（2）多重box-shadow设置
我们可以通过多次调用box-shadow属性来创建多层阴影，从而实现更为丰富的效果：
box-shadow:
0 2px 2px rgba(0, 0, 0, 0.25),
0 4px 4px rgba(0, 0, 0, 0.25),
0 8px 8px rgba(0, 0, 0, 0.25);
上述代码实现的效果是，从内到外分别绘制了三层阴影，分别为位置偏移值为(0,2px)，模糊半径为2px，颜色为rgba(0, 0, 0, 0.25)；位置偏移值为(0,4px)，模糊半径为4px，颜色同样为rgba(0, 0, 0, 0.25)；以及位置偏移值为(0,8px)，模糊半径为8px，颜色同样为rgba(0, 0, 0, 0.25)。
（3）盒子圆角的阴影设置
如果我们需要在盒子的圆角处绘制阴影效果，可以通过border-radius属性和box-shadow属性的结合设置来实现：
box-shadow:
0 0 5px #ccc,
0 0 10px rgba(0, 0, 0, 0.15),
inset 0 0 5px rgb(255, 255, 255);
border-radius: 10px;
上述代码实现的效果是，在元素内部添加一个白色边框，并在这个白色边框周围绘制一层浅灰色的阴影。盒子的圆角使用了border-radius属性设置，同时在多层阴影中添加inset参数，表示这是一个内嵌的阴影。
