<aside> 💡 Shadows add texture, perspective, and emphasize the dimensions of objects.
</aside>
<aside> 💡 阴影为物体增加纹理、透视效果、以及对三维形状的强调。
</aside>
阴影是自然界非常常见的一种光学现象，计算机图形学领域一直在致力于模拟和实现阴影效果。
在 web 设计领域，CSS 阴影可以为 UI 元素增加物理真实性，创造丰富、有触感、有层次的用户界面，是一种使用非常频繁的技术。
有光，才有阴影，要想做出自然的阴影，一定也是要遵循自然规律的。Google Material Design 规范定义了一个阴影效果至少要包含两种光源的类型: 主光源和环境光源。相比单一阴影这样的组合更接近物理真实，也更自然。
主光源从单方向入射，创造出的阴影更有方向性
环境光源从各个方向入射，创造出的阴影更柔和圆润
组合了主光源阴影和环境光源阴影的阴影效果
虽然这已经很棒了，但自然界中的光影显然不会这么简单。通过叠加更多的阴影效果，模拟出有更多光源的阴影。
以下是一个阴影效果在线生成工具，非常棒！可惜的是只有一个方向
在 CSS 中，有两个方法为元素添加 drop-shadow:
box-shadow 属性filter: drop-shadow 属性这两个标准虽然参数大致相同（box-shadow多一个spread-radius），但实际的视觉效果并不一致，可能是由于语义上的差别。在多阴影叠加时特别明显：