如何通过阴影进阶技巧，打造更立体逼真的阴影效果？

本文共计3083个文字，预计阅读时间需要13分钟。

CSS 阴影的存在，让物体看起来更具立体感。然而，在简单阴影的使用上，我们也可以实现更多有创意且立体感更强的阴影效果。本文将带大家看看如何使用 CSS 实现几种常见的阴影效果。

CSS 阴影的存在，让物体看上去更加有型立体。

然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。

本文将带大家看看如何使用 CSS 实现几类比普通阴影更加立体的阴影效果。

CSS 阴影基础

CSS 中，明面上可以实现阴影的有三个属性：

• box-shadow - 盒阴影
• text-shadow - 文字阴影
• filter: drop-shaodw() - 滤镜内的阴影

关于它们的基础语法和使用就不过多描述，这一部分大家可以先在 MDN 补齐，贴几张图快速复习一下：

box-shadow - 盒阴影：

text-shadow - 文字阴影：

filter: drop-shaodw() - 滤镜内的阴影：

基本上 3 种阴影大同小异，需要注意的就是：

• box-shadow 还区分内阴影，内阴影使用关键字 inset 进行描述；
• box-shadow 多一个阴影扩散半径参数。

长投影

上面提到了通过多层阴影叠加实现文字的立体阴影。运用在 div 这些容器上也是可以的。当然这里还有一种挺有意思的方法。