，介绍了一些关于 box-shadow 的用法。
，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖到的新内容，而且有一些很有意思，遂打算再起一篇。
Box-shadow 与 filter:drop-shadow，为啥？因为使用其他属性也可以模拟阴影，而且是各种各样的阴影。下面且听我娓娓道来~
Box-shadow，大部分时候，我们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。如下：
生成一个单侧的投影呢？
Box-shadow 的用法定义：
Box-shadow: none | [inset? && [? ? ? ] ]# }
Box-shadow: 1px 2px 3px 4px #333 为例，4 个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。
生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。所以这个时候，我们给定一个方向的偏移值，即可实现单侧投影：
0 = -0，所以当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们也可以得到一个和元素大小一样的阴影，只不过被元素本身遮挡住了，我们尝试将其偏移出来。
Box-shadow 是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画）。但是 background-image: linear-gradient()，也就是渐变背景是不能进行补间动画的。
Box-shadow 实现原本只能利用渐变才能实现的背景图：
Box-shadow，实现它的 CSS 代码如下（可以更简化）：
.shadow::before {
content: "";
position: absolute;
width: 50px;
height: 50px;
top: -50px;
left: -50px;
Box-shadow:
50px 50px #000,150px 50px #000,250px 50px #000,50px 100px #000,150px 100px #000,250px 100px #000,50px 150px #000,150px 150px #000,250px 150px #000,50px 200px #000,150px 200px #000,250px 200px #000,50px 250px #000,150px 250px #000,250px 250px #000;
}
Box-shadow 呢？因为它可以进行补间动画，像这样，这是使用渐变做不到的：
主题是立体投影。
Box-shadow、text-shadow 或者 drop-shadow，而是我们使用其他元素或者属性模拟元素的阴影。而这样做的目的，是为了能够突破 Box-shadow 这类元素的一些定位局限。让阴影的位置、大小、模糊度可以更加的灵活。
自定义阴影的位置，让它更加立体：
bos-shadow ，看上去和立体没什么关系，接下来，我们通过 div 的伪元素，给它生成一个和原图边角形状类似的图形，再通过 transform 位移一下，可能是这样：
生成的元素进行一些虚化效果（filter或者Box-shadow都可以），就可以实现一个边角看起来像被撕开的立体效果：
代码非常简单，伪 CSS 代码示意如下：
div::before {
content: "";
position: absolute;
top: 50%;
left: 5%;
right: 5%;
bottom: 0;
border-radius: 10px;
background: hsl(48,20%);
transform: translate(0,-15%) rotate(-4deg);
transform-origin: center center;
Box-shadow: 0 0 20px 15px hsl(48,20%);
}
- 生成一个大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再赋于阴影操作
