image.png
CSS box-shadow 属性用于在元素的框架上添加阴影效果。

box-shadow: 0.5px 1px 2px 2px #d6d9e1;
-ms-box-shadow: 0.5px 1px 2px 2px #d6d9e1;
-moz-box-shadow: 0.5px 1px 2px 2px #d6d9e1;
-webkit-box-shadow: 0.5px 1px 2px 2px #d6d9e1;

有以下参数：

值	说明
X轴偏移量	。水平阴影的位置。允许负值。
Y轴偏移量	。垂直阴影的位置。允许负值。
blur阴影模糊半径	可选。模糊距离。
spread阴影扩展半径	可选。阴影的大小。
color阴影颜色	可选。阴影的颜色。省略默认为黑色。
inset	可选。(设置inset时为方式，如果省略为方式)

向元素添加单个 box-shadow 效果时使用以下规则：

当给出两个、三个或四个值时：

• 如果只给出两个值, 那么这两个值将会被当作 <offset-x>,<offset-x>来解释。
• 如果给出了第三个值, 那么第三个值将会被当作 <blur> 解释。
  如果给出了第四个值, 那么第四个值将会被当作 <spread> 来解释。
• 可选，<inset> 关键字。
• 可选，<color> 值。

属性效果说明

• offset-x、offset-y，容易理解，设置阴影的水平垂直偏移，可以设置负值。
• blur，值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0。
• spread，取正值时，阴影扩大；取负值时，阴影收缩。默认为0。
• inset， 如果没有指定inset，默认阴影在边框外，即阴影向外扩散。使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。
• color，如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。

设置多个值时

你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。阴影绘制由最后一个开始， 故第一个设置的阴影将覆盖在后设置的阴影之上。
利用此特性可以给上下左右边框设置不同样式的阴影效果：

box-shadow:  0px -5px 5px 0px #ff0000,   /*上边阴影  红色*/
             -5px 0px 5px 0px #3bee17,   /*左边阴影  绿色*/
             5px 0px 5px 0px #2279ee,    /*右边阴影  蓝色*/
             0px 5px 5px 0px #eede15;    /*下边阴影  黄色*/

Tips:

当我们设置了border-radius为其他不为0的值时，阴影的四角也随之形成弧度。
box-shadow属性不会影响到盒模型的构成。我们通常在元素上增加一个大小为最大阴影宽度的margin值以保证阴影不会覆盖到相邻的元素或者覆盖到元素的border上。
当只设置了spread大于0，没有设置blur（为0）时，元素阴影没有模糊效果，就像多了外边框。