box-shadow工具类应按层级感强度命名（如shadow-none至shadow-lg），用多层阴影模拟真实本影与半影，并通过prefers-color-scheme适配暗色模式，冲突时用isolation: isolate或伪元素解决。
box-shadow 工具类怎么写才不重复又够用
直接写 box-shadow 值容易失控：不同组件要的阴影深浅、扩散、偏移各不相同，硬编码会导致样式表膨胀、维护困难。工具类的本质是把常用组合抽象成语义化类名，比如 shadow-sm、shadow-md、shadow-lg，而不是塞一堆 box-shadow: 0 2px 4px rgba(0,0,0,0.1) 到每个元素上。
推荐按「层级感强度」而非「像素值」命名，这样设计师和前端理解一致，也方便后续响应式调整：
-
shadow-none→box-shadow: none -
shadow-xs→ 轻微浮起，适合卡片 hover 或 tab 激活态：box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.05) -
shadow-sm→ 默认卡片阴影，兼顾可读性与轻量：box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.05) -
shadow-md→ 弹窗/模态框主阴影，有明确立体感：box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.05) -
shadow-lg→ 悬浮按钮或高优先级提示：box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
为什么不能只靠一个 box-shadow 值模拟真实阴影
单层 box-shadow（如 0 2px 4px rgba(0,0,0,0.2)）在视觉上容易显得“平”或“脏”，尤其在浅色背景上。真实物体投下的阴影有本影（靠近物体、更实）和半影（边缘渐变、更虚），CSS 支持多层叠加，这是工具类必须利用的关键能力。
例如 shadow-md 中用了两层：
立即学习“前端免费学习笔记（深入）”；
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
第一层控制主体深度（较大模糊 + 负 spread 抑制过度扩散），第二层补充近端柔和过渡。漏掉其中一层，层次感立刻下降一个量级。
暗色模式下 box-shadow 工具类怎么适配
直接复用同一套 rgba(0,0,0,0.x) 在深色背景上会失效——黑底加黑影几乎不可见，甚至产生反向“凸起”错觉。不能靠 JS 切换类名，得用 CSS 原生机制。
正确做法是用 color-scheme: light dark 配合 @media (prefers-color-scheme: dark) 重定义颜色值：
@media (prefers-color-scheme: dark) {
.shadow-sm {
box-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.08), 0 1px 2px -1px rgba(255, 255, 255, 0.05);
}
.shadow-md {
box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.08), 0 2px 4px -1px rgba(255, 255, 255, 0.05);
}
}
注意：深色模式下用白/浅灰替代黑，透明度也要调低（0.05–0.1 足够），否则像蒙了一层雾。
box-shadow 工具类和 backdrop-filter 冲突怎么办
当给带 backdrop-filter: blur(10px) 的毛玻璃容器加 shadow-lg，阴影可能被模糊区域“吃掉”——因为 box-shadow 渲染在元素自身层级，而 backdrop-filter 作用于其背后内容，两者不在同一合成层。
解决方法只有两个：
- 给该元素额外加
isolation: isolate，强制创建独立层叠上下文，让阴影不被 backdrop 裁剪 - 改用伪元素模拟阴影：
::after绝对定位 +filter: blur()+ 透明度控制，虽稍重但完全可控
别试图用 z-index 调整——box-shadow 不参与 z-index 排序，它永远“贴着”元素渲染。
