一、box-shadow简介
box-shadow用于对元素添加一个或多个投影。它的语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow属性可以接受多个阴影值，用逗号分隔。在每个阴影值内部，可以包含1-4个值，分别为偏移量，模糊半径，扩散半径和颜色。其中，偏移量必选，其他值可选。下面，我们将按照参数的类型阐述box-shadow属性。
二、阴影偏移量
h-shadow和v-shadow是box-shadow属性中必选的参数。它们分别表示阴影的水平和垂直偏移。可以为这两个参数设置正负值，正数表示阴影在元素右侧（水平偏移）、下侧（垂直偏移），负数则表示阴影在元素左侧、上侧。
例如，下面的代码演示了一个向右两像素、向下三像素的红色阴影：
box-shadow: 2px 3px red;
此外，h-shadow和v-shadow还可以是一个长度值或百分比值，它们决定了阴影的参照物。如果这两个值为0，阴影将和元素重叠。
三、模糊半径
blur参数可选，用于设置阴影的模糊半径，也就是模糊的程度，数值越大越模糊。如果这个值为0，阴影就是一个纯色的小圆点，没有任何扩散效果。
例如，下面的代码描绘了一个红色模糊半径为5像素的阴影：
box-shadow: 2px 3px 5px red;
四、扩散半径
spread参数用于设置阴影的扩散半径，也就是阴影扩展或收缩的程度，数值越大，阴影越大。如果这个值为负，阴影就缩小到元素内部。
例如，下面的代码描绘了一个红色扩散半径为10像素的阴影：
box-shadow: 2px 3px 5px 10px red;
五、阴影颜色
color参数用于设置阴影的颜色，可以使用CSS颜色名、RGB值、十六进制值，也可以使用关键字none。如果省略这个值，默认是黑色。另外，如果在一个box-shadow值中没有color值，阴影就不会出现。
例如，下面的代码演示了一个偏移值为5像素、红色、模糊半径为5像素、扩散半径为10像素的阴影：
box-shadow: 5px 5px 5px 10px red;
六、插入阴影
inset参数用于设置阴影是嵌入还是突出。如果值为inset，阴影被内嵌到元素中，而不是通过外部投射矩形框来绘制阴影。默认情况下，阴影是投射于元素之外。
例如，下面的代码演示了一个偏移值为5像素、黑色、内嵌的阴影：
box-shadow: inset 5px 5px black;
七、不规则形状阴影
box-shadow不仅能给常见的形状添加阴影，也能给不规则形状添加阴影，这点就是传统实现方式所不能达到的。下面的代码演示了如何给一个不规则的图像添加阴影：
