box-shadow：给盒子加上阴影效果
语法：
box-shadow： offset-x offset-y blus spread color inset;
box-shadow： X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]；
X轴偏移量：阴影在X轴上的位置。当值为正数时，阴影位于元素的右侧；当值为负数时，阴影位于元素的左侧。
Y轴偏移量：阴影在Y轴上的位置。当值为正数，阴影位于元素的底部；当值为负数，阴影位于元素的顶部。
[阴影模糊半径] ：该参数是可选的。其值只能为正值，如果值为0时，表示阴影不具有模糊效果，blur值越大阴影的边缘就越模糊。
[阴影扩展半径]：该参数是可选的。当值为0，完全没有扩展；当值为正数时，扩展越大；当值为负数时， 扩展缩小。
[阴影颜色]：该参数是可选的。颜色单位有常用色值, RGB, RGBA, HSLA等。
[阴影方式]：改参数是可选的。默认为外部阴影（outset）, 可通过inset值来设置内部阴影.
案例：
X轴偏移量
.left { box-shadow: 20px 0 10px 0 rgba(0,0,0,.3); } /*阴影向右偏移20px*/
.right { box-shadow: -20px 0 10px 0 rgba(0,0,0,.3); } /*阴影向左偏移20px*/
Y轴偏移量
.left { box-shadow: 0px 20px 10px 0 rgba(0,0,0,.3); } /*阴影向下偏移20px*/
.right { box-shadow: 0px -20px 10px 0 rgba(0,0,0,.3); } /*阴影向上偏移20px*/
[阴影模糊半径]
.left { box-shadow: 0px 0px 0px 0 rgba(0,0,0,1); } /*模糊半径为0px，完全没有模糊效果*/
.right { box-shadow: 0px 0px 80px 0 rgba(0,0,0,1); } /*模糊半径为80px*/
上图中我们不难看出，对角线上的模糊是最弱的，要想模糊变得均匀，将元素设置成圆形。即 border-radius：50% 如下图所示
.right { box-shadow: 0px 0px 80px 0 rgba(0,0,0,1); border-radius: 50%; } /*模糊半径为80px，边框为50%（即圆形）*/
[阴影扩展半径]
.left { box-shadow: 0px 0px 0px 0px #ccc; } /*扩展半径为0px*/
.right { box-shadow: 0px 0px 10px 10px #ccc; } /*扩展半径为10px，模糊半径为10px*/
[阴影颜色] 以下颜色都为黑色
.left { box-shadow: 0px 10px 10px 0px black; }
.left { box-shadow: 0px 10px 10px 0px #000; }
.left { box-shadow: 0px 10px 10px 0px rgba(0,0,0,1); }
[阴影方式]
.left { box-shadow: 0px 0px 10px 10px #ccc;} /*模糊半径与扩展半径都为10px,默认外部阴影*/
.right { box-shadow: 0px 0px 10px 10px #ccc inset; } /*模糊半径与扩展半径都为10px,内部阴影*/
多个阴影方式：如果需要添加多个阴影，只需用逗号隔开即可。
.left { box-shadow: 0px 0px 10px 5px #ccc, 0px 0px 10px 5px rgba(255,255,255,1) inset; } /*同时设置内外阴影*/
.left { box-shadow: -10px 10px 10px 10px rgba(0,0,0,.6); } /*阴影向左偏移10px，向下偏移10px，扩展半径与模糊半径为10px。若是要设置为内阴影，加上 inset 。*/
.left { box-shadow: 10px -10px 10px 10px rgba(0,0,0,.6); } /*阴影向右偏移10px，向上偏移10px，扩展半径与模糊半径为10px。 若是要设置为内阴影，加上 inset 。*/
如有不足之处，请多多指教。未经本人同意，请勿转载~
