box-shadow

很多人使用 box-shadow 的方法是，指定三个长度值和一个颜色值。

1. 以该元素相同的尺寸和位置，画一个背景色为 black 的矩形
2. 把它向右移 5px，向下移 4px
3. 使用高斯模糊算法（或类似算法）将它进行 4px 的模糊处理。这在本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过渡长度近似于模糊半径的两倍（比如这里是 8px）
4. 模糊后的矩形与原始元素的交集部分会被切除掉

但是这在某种程度上会导致外露的投影太过浓重，看起来不是很美观。

单侧投影

解决方案来自 box-shadow 鲜为人知的第四个长度参数，称为扩张半径。这个值会根据你指定的值去扩大或（当指定负值）缩小投影的尺寸。

从逻辑上来讲，如果我们应用一个负的扩张半径，而它的值刚好等于模糊半径，那么投影的尺寸就会和投影所属元素的尺寸完全一致。除非用偏移量来移动它，否则我们将看不到任何投影。

因此，我们给投影应用一个正的垂直偏移量即可。

邻边投影

传统的应用 box-shadow 会使得阴影太过浓厚。

我们可以这样做（将扩张半径设置为模糊半径相反值的一半）：

双侧阴影

把单侧投影中的技巧应用两次。