box-shadow阴影

使用box-shadow为盒子添加阴影。

box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
box-shadow: x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

投影方式有两种：inset内部投影，outset外部投影，默认值。

box-shadow: 0px 0px 0px 10px red;

box-shadow: 0px 0px 10px 0px red;

box-shadow: 0px 0px 10px 10px red;

box-shadow: 10px 10px 10px 10px red;

box-shadow: 10px 10px 10px 10px red inset;

阴影只是表现，而不会占据实际的位置。

可以同时添加多个阴影效果，只需要用逗号隔开

box-shadow: 0px -10px 10px 2px red,
            -10px 0px 10px 2px blue,
            10px 0px 10px 2px orange,
            0px 10px 10px 2px green;
![这里写图片描述](https://img-blog.csdn.net/20170525215350499?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXBkZW1w/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
上图中的分方向的阴影是通过h-shadow,v-shadow来实现的

兼容性

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);//使用滤镜，但是滤镜必须要设置background-color;
background-color: #CCC;

-moz-box-shadow: 0px 10px 10px 2px green;
-webkit-box-shadow: 0px 10px 10px 2px green;
box-shadow: 0px 10px 10px 2px green;