CSS3 box-shadow介绍：

基本参数设置

• none：是默认值，表示没阴影。设置为none后下面的参数都没有任何意义。
• inset：内阴影，改参数可选，不设的话默认是外阴影。
• x-offset / y-offset：必须的参数。水平和垂直阴影的偏移量。正值表示往x轴y轴正方向偏移（即往右往下）。负值反过来往x轴y轴反方向偏移（即往左往上）。
• blur-radius：阴影模糊半径。改参数可选，值为0表示不模糊，值越大，阴影的边缘就越模糊。值不能为负数。
• spread-radius：阴影扩展半径。改参数可选，正值表示阴影扩展，负值表示阴影缩小。
• color：阴影颜色，改参数可选，不设就取浏览器的默认色。各浏览器的默认色不同。
  完整的语法：box-shadow:[inset x-offset y-offset blur-radius spread-radius color]++代表可以设置多个阴影。

示例：

1. 先设置x-offset和y-offset和color的值，其他的不设置。

div {
  width: 150px;
  height: 50px;
  border: 1px solid #b9b9b9;
  box-shadow: 10px 10px purple;
  border-radius: 10px;
}

1.png

2. 加上不同值的blur-radius。
   图一 10px；图二 30px；图三 50px。
   
   3.png
   
   
   4.png
   
   
   5.png
   
   可以看到，加了blur-radius模糊半径后，原本的实体阴影往外扩展了，尤其是blur-radius的值设成50px之后。
   阴影扩散的原因：
   当浏览器读取到上面的box-shadow: 10px 10px 50px purple;后，浏览器会分四步来实现阴影效果。

• 根据指定的color克隆一个和原始元素同样尺寸的元素。
• 之后根据指定的x-offset / y-offset将克隆出来的元素进行偏移。
• 第三步根据指定的 blur-radius模糊半径10px，根据高斯算法进行模糊处理。本质上是在阴影边缘将阴影色和纯透明之间的颜色过滤，长度近似于blur-radius模糊半径的两倍，即20px左右。这就是导致阴影外扩的原因。
• 最后，浏览器在克隆元素上，将交集的部分剪切掉，剩余的部分拼接到原始元素边上，就实现了最终的效果。这意味着即使你将原始元素的背景设成半透明，也不会看到底层克隆的元素。因为原始元素下面根本没有东西。

3. 如果想限制模糊半径的范围，如单边模糊时，你就需要加上spread-radius阴影扩展半径。第一张图片虽然只设置了box-shadow: 0 10px 20px purple;，但是阴影外扩导致都出现了阴影，第二张图片，box-shadow: 0 10px 20px -10px purple;,通过spread-radius负值让阴影缩小。会把上下高度和左右宽度都缩小10px；即宽高均缩小20px。
   
   a.png
   
   
   b.png
4. 如果blur-radius为0时（表示不模糊阴影），只有spread-radius时，效果相当于border。但这不是真正的border,盒子模型在计算宽高时不会被计算在内，因此文字hello和阴影重叠了，如果是真的border不会重叠。
   
   c.png
5. 阴影默认都是外阴影，可以设置inset设置成内阴影。
   box-shadow: inset 20px 20px 20px -10px purple;
   
   e.png

6. 但是给图片加上内阴影没有效果。

   
   
   f.png
   
   

   内阴影已经有了，只是被遮盖住了而已。解决办法

• 方案一：将子元素的img层级降低，所以先将其设成relative再设z-index为-1.

.ct{
  
  border:  1px solid #b9b9b9;
  box-shadow: inset 20px 20px purple;
  border-radius: 10px;
  display: inline-block;
}
.ct>img {
  
  position: relative;
  z-index: -1;
}

• 方案二：将子元素img改成父元素div的background-img，所以先给div定宽高，再设background-img。

.ct{
  width: 200px;
  height: 200px;
  background-image: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2249893882,1165836821&fm=27&gp=0.jpgf");
  border:  1px solid #b9b9b9;
  box-shadow: inset 20px 20px purple;
  border-radius: 10px;
  display: inline-block;
}

box-shadow的层级关系从高到低依次是：border > 内阴影 > background-image > background-color > 外阴影。

多层阴影

1. 还可以设置多层阴影，用逗号隔开。实现方式就是两个0偏移量和0模糊值，加上正值的扩展半径。

.ct{
  width: 200px;
  height: 200px;
  border: 2px solid red;
  box-shadow: 0 0 0 2px orange,
              0 0 0 4px yellow,
              0 0 0 6px green,
              0 0 0 8px #6cc;
              0 0 0 10px blue,
              0 0 0 12px #969;
}

2. 多层阴影的一个常见的列子既是实现两侧阴影。

.ct{
 width: 200px;
  height: 200px;
  box-shadow: 6px 0 10px -10px red,
             -6px 0 10px -10px red;
             
}

g.png

单边不均匀的阴影：

单边不均匀的阴影不是仅靠box-shadow属性就能实现的，还需要配合图层覆盖和部分动画（如旋转）。

body {
  background: #eee;
}
.box {
  width: 200px;
  height: 200px;
  background: #fff;
  margin: 10px;
  line-height: 100px;
  text-align: center;
  position: relative;
}

• 第一步：先给div加上::before和::after两个伪元素，内容为空，只需要伪元素的躯壳，并不想让伪元素显示出来。（伪元素里面的红色border是为了看起来更清晰，最后会被删掉。）

.effect::before,.effect::after {
  content: '';
  border: 1px solid red;
  width: 50%;
}

• 第二步：为两个伪元素增加absolute定位，通过left和top为absolute元素定位，通过bottom拉伸absolute元素。

.effect::before,.effect::after {
  content: '';
  border: 1px solid red;
  width: 50%;
  position: absolute;
  left: 10px;
  top: 80%;
  bottom: 15px;
}

• 第三步： 定位后的::before和::after两个伪元素完全重合在一起了，因此在第三步中为::after指定right位置将他们分开。

.effect::after {
  right: 10px;
  left: auto;
}

• 第四步：让他们稍微旋转一点角度，并加上阴影。

.effect::before,.effect::after {
  content: '';
  border: 1px solid red;
  width: 50%;
  position: absolute;
  left: 10px;
  top: 80%;
  bottom: 15px;
  transform: rotate(-5deg);
  box-shadow: 0 15px 10px #777;
}
.effect::after {
  transform:rotate(5deg)
  right: 10px;  
  left: auto;
}

• 最后一步设置z-index:-1将伪元素隐藏掉。

.effect::before,.effect::after {
  content: '';
  border: 1px solid red;
  width: 50%;
  position: absolute;
  left: 10px;
  top: 80%;
  bottom: 15px;
  transform: rotate(-5deg);
  box-shadow: 0 15px 10px #777;
  z-index: -1;
}