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

---

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