CSS Box Shadow 怎么调？阴影层次、按钮卡片和悬浮效果指南

阴影能让按钮、卡片、弹窗更有层次。CSS 的 box-shadow 很灵活，但参数多，手调容易过重或发脏。

你可以用 CSS Box Shadow 生成器 预览并复制代码。

参数怎么看

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);

依次是：

• x 偏移。
• y 偏移。
• 模糊半径。
• 扩散半径，可选。
• 颜色。

阴影要克制

常见问题：

• 阴影太黑。
• 模糊太小，像脏边。
• 所有卡片都悬浮，页面很乱。
• hover 阴影导致布局跳动。

建议把阴影当层级系统使用，而不是每个元素都加。

多层阴影

多层阴影可以更自然：

box-shadow:
  0 2px 6px rgba(0,0,0,.08),
  0 12px 24px rgba(0,0,0,.12);

第一层做接触阴影，第二层做远处投影。

根据背景调整阴影

同一组阴影放在白底、灰底、彩色底、深色底上效果会完全不同。浅色页面可以用低透明黑色阴影，深色页面更适合用边框、高光或更柔和的外发光。直接把浅色主题阴影搬到深色主题，经常会显脏。

弹窗、下拉菜单和普通卡片不应该同一层级。弹窗需要更强的分离感，普通卡片只要轻微层次即可。把阴影按层级分成小、中、大三套，会比每个组件单独调更稳定。

交互状态要一致

hover 时可以稍微增加 y 偏移和模糊半径，但不要改变元素尺寸，也不要让阴影遮住相邻内容。按钮按下时则可以减少阴影，让它看起来贴近底面。状态统一后，用户会更容易理解哪些元素能点击。

截图检查很有效

阴影在单个组件预览里通常看着不错，放回真实页面后才会暴露问题。可以截一张整页图，把注意力放在内容层级上：弹窗是否最突出，卡片是否压过按钮，导航是否抢视觉。阴影应该帮助阅读顺序，而不是制造噪音。

总结

Box Shadow 的关键是层次和克制。好阴影应该让界面更清楚，而不是抢内容。

需要调参数时，可以用 CSS Box Shadow 生成器，复制后在真实页面里看整体效果。