CSS3知识点——box-shadow属性
box-shadow：10px 10px 10px 10px #000000 insert;
/* x轴（必选）| y轴（必选） | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 | 阴影内外*/
其中，x轴为正时，阴影在右边，为负值时在左边；y轴为正时，在下边，为负值时在上边。
Have a try~
<div class = "test"></div>
.test{
width: 100px;
height: 100px;
background-color: blue;
}
①四边都有阴影
box-shadow：0px 0px 10px #000000;
②右边阴影
box-shadow：10px 0px 5px #000000;
③左边阴影
box-shadow：-10px 0px 5px #000000;
④下边阴影
box-shadow：0px 10px 5px #000000;
⑤上边阴影
box-shadow：0px -10px 5px #000000;
⑥右下阴影
box-shadow：10px 10px 5px #000000;
⑦右上阴影
box-shadow：10px -10px 5px #000000;
⑧左下阴影
box-shadow：-10px 10px 5px #000000;
⑨左上阴影
box-shadow：-10px -10px 5px #000000;
⑩内部四边阴影
box-shadow：0px 0px 20px #000000 inset;
⑪内部左上阴影
box-shadow：10px 10px 5px #000000 inset;
可以看出内部阴影和外部阴影在x轴和y轴上相反。
PS：该属性适用于盒模型（div，p，h1~h6），文字阴影使用test-shadow。
为了兼容各个主流浏览器，基于主流浏览器上使用box-shadow时，我们需要将属性的名称写成-weikit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式，Opera浏览器 -o-box-shadow，IE > 9则是-ms-box-shadow。
