单侧投影可以实现一种优雅而又真实的效果。

单侧投影

box-shadow: 2px 3px 4px -4px rgba(0,0,0.5);

1. 以该元素所在的位置和尺寸，画一个rgba(0,0,0.5)的矩形

2. 把它向右移动2px，向下移动3px

3. 对它进行4px模糊算法。

4. 缩小投影的尺寸。

5. 模糊后的矩形和原始元素交集的部分被剔除

   如果第三个参数和第四个参数相反，我们就看不到任何投影，除非用偏移量移动投影。如此我们可以简单的创建单侧投影

box-shadow: 0px 5px 4px -4px rgba(0,0,0.5);

邻边投影

邻边投影比较好解决

双侧投影

双侧投影没有简单的半分，唯一的方案是把单侧投影运用两次

box-shadow: 5px 0 5px -5px rgba(0,0,0.5),           -5px 0 5px -5px rgba(0,0,0.5);