Box-Shadow 通常，我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能，多层阴影，制作一些非常有趣的动画。
box-shadow: h-shadow v-shadow blur spread color inset;
属性值描述 h-shadow 指阴影水平偏移量，其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边 v-shadow 指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部 blur 阴影模糊半径，此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊 spread 阴影扩展半径，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小 color 阴影颜色，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。 inset 阴影类型，默认的投影方式是外阴影；inset就是将外阴影变成内阴影
注意：多层阴影，最内层优先级最高，之后依次降低。使用逗号“，”隔开。
下面我们一起，通过简单示例来学习吧

示例一

老规矩，看图说话（这个效果，你能想到什么办法实现了？gif...），下面我们一步一步显示上图的效果
css 
.load-container {
  width: 240px;
  height: 240px;
  margin: 50px auto;
}

.load1 .loader {
  color: #3eaf7c;
  font-size: 20px;
  margin: 200px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  border: 1px solid #3eaf7c;
  box-shadow: 
      0 -3em 0 0.2em,
      2em -2em 0 0.2em,
      3em 0em 0 0.2em,
      2em 2em 0 0.2em,
      0em 3em 0 0.2em,
      -2em 2em 0 0.2em,
      -3em 0em 0 0.2em,
      -2em -2em 0 0.2em;
}
有了这样一个图，是不是非常清楚了，我们利用多层阴影，制作一个圆圈围绕的环形。然后动画动画不停的改变每个圆圈颜色。 
@keyframes aniLoad1 {
  0%,
  100% {
    box-shadow: 
      0em -2.6em 0em 0em #3eaf7c, 
      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 
      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 
      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 
      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), 
      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), 
      -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), 
      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
  }
  12.5% {
    box-shadow: 
      0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 
      1.8em -1.8em 0 0em #3eaf7c, 
      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 
      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 
      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), 
      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), 
      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), 
      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
  }
  25% {
    ...
  }
  ...
}
.load1 .loader{
  animation: aniLoad1 1.1s infinite ease;
}
这样就形成了loading效果。

示例二

有了示例一的经验，我们稍微变形一下，动画改变每个圆圈的大小，即可形成下图动画：
css 
@keyframes aniLoad2 {
  0%,
  100% {
    box-shadow: 
      0 -3em 0 0.2em, 
      2em -2em 0 0em, 
      3em 0 0 -1em, 
      2em 2em 0 -1em, 
      0 3em 0 -1em, 
      -2em 2em 0 -1em, 
      -3em 0 0 -1em, 
      -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 
      0 -3em 0 0, 
      2em -2em 0 0.2em, 
      3em 0 0 0, 
      2em 2em 0 -1em, 
      0 3em 0 -1em, 
      -2em 2em 0 -1em, 
      -3em 0 0 -1em, 
      -2em -2em 0 -1em;
  }
  25% {
    ...
  }
  ...
  87.5% {
    ...
  }
}
.load2 .loader {
  ...
  animation: aniLoad2 1.3s infinite linear;
}

示例三