什么是 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: 请确保元素的背景色与阴影颜色有足够对比，或者尝试增加模糊半径和扩展半径。