什么是 box-shadow？

CSS 的 box-shadow 属性允许您在元素的框架上添加一个或多个阴影效果。它不仅能增加 UI 的深度和立体感，还能通过视觉上的“距离感”来区分不同层级的内容。一个完美的阴影能让您的网页从扁平变得生动，是解决“界面单调”和“重点不突出”问题的有力武器。

box-shadow 各个参数的具体作用

• 水平偏移 (X-offset)： 正值使阴影向右移动，负值使阴影向左移动。
• 垂直偏移 (Y-offset)： 正值使阴影向下移动，负值使阴影向上移动。它决定了虚拟光源的位置。
• 模糊半径 (Blur Radius)： 数值越大，阴影越模糊、越弥散；数值越小，阴影越清晰、越锐利。
• 扩展半径 (Spread Radius)： 正值会扩大阴影的尺寸，负值会缩小阴影。它可以用来精细调整阴影的厚度。
• 内阴影 (Inset)： 将阴影从元素外部移到内部，创造出一种“凹陷”或“被按下”的视觉效果。

专业设计技巧：如何创建真实的阴影？

在自然界中，阴影往往是极其柔和且具有层次的：

• 避免纯黑色： 使用带有透明度的黑色（如 rgba(0,0,0,0.1) ）或深蓝色调，比纯黑色看起来更自然。
• 多层叠加： 为了获得超柔和的效果，顶尖设计师通常会叠加 2-3 层阴影，每层具有不同的模糊度和偏移量。
• 考虑光源一致性： 确保页面上所有元素的阴影偏移方向一致，这样能让整体 UI 逻辑更严密。

常见问题 (FAQ)

Q: 阴影会影响性能吗？
A: 大量或极其复杂的模糊阴影可能会增加浏览器的渲染压力，尤其是在移动端或滚动时。建议适度使用。

Q: 如何让阴影随鼠标悬浮变化？
A: 您可以为元素设置 transition: box-shadow 0.3s ease; ，然后在 :hover 状态下应用不同的阴影数值。

Q: 为什么我的内阴影看不出来？
A: 请确保元素的背景色与阴影颜色有足够对比，或者尝试增加模糊半径和扩展半径。