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 。*/

如有不足之处，请多多指教。未经本人同意，请勿转载~

CSS3 box-shadow属性基础（一）