关于box-shadow一些迷惑的解决

关于一些设计图中常遇到的阴影

语法

E {box-shadow: <length> <length> <length>?<length>?||<color>}
也就是：
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
换句说：
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

对于这种形式的阴影

 .dome2 {
   box-shadow: -2px 0 0 green, //左边阴影
   0 -2px 0 blue, //顶部阴影
   0 2px 0 red, //底部阴影
   2px 0 0 yellow; //右边阴影

 }

以前老是惯性的复制，然后将用不到的那边的阴影参数改成0 0 0，这就是为什么老是达不到设计图的效果的原因了。

一般需要设置那部分的阴影的时候就留下那部分的属性值就好了，不需要用到的那边可以删掉

像这种（注意蓝色背景左右边的阴影）

.tvi_recommend h2  {

1. font-size: 25px;
2. color: #fff;
3. background-color: #00b0ec;
4. font-weight: 700;
5. height: 55px;
6. line-height: 55px;
7. position: relative;
8. margin-bottom: 0;
9. -moz-box-shadow: -4px 0 6px #c7c7c7,4px 0 6px #c7c7c7;
10. -webkit-box-shadow: -4px 0 6px #c7c7c7,4px 0 6px #c7c7c7;
11. box-shadow: -4px 0 6px #c7c7c7,4px 0 6px #c7c7c7;

}

我是这样实现的，后面三句是实现了阴影，可能原来一直不够灵活，然后留下了其他变的阴影，以为都是需要的，然后设置为了0

可是并没有良好的解决这个问题，给其他变的设置带来了影响，所以类似这种只需要上阴影或者下阴影的时候就不在需要借助伪类元素

费力的实现了。

使用box-shadow的时候注意兼容多个浏览器终端就没有什么问题了。