box-shadow 多层叠加时颜色不互相吃掉的关键是控制每层 rgba 透明度与 blur-radius 梯度：外层虚远淡（大模糊、高透明）、中层实近略重（中模糊、偏移）、内层压边清晰（小模糊、微偏移），并按明暗模式切换色值、限制层数≤3、匹配 border-radius。
box-shadow 多层叠加时颜色怎么不互相吃掉
默认情况下，box-shadow 是从外向内逐层绘制的，后写的阴影会盖在先写的上面；但颜色“吃掉”其实是透明度和混合方式导致的视觉错觉——不是真被覆盖，而是叠加后变深/变浑浊了。关键在控制每层的 rgba() 透明度和模糊半径。
- 第一层用高透明度（如
rgba(255, 100, 100, 0.1)）打底，做大范围模糊（0 0 20px），负责氛围感 - 第二层用稍低透明度（如
rgba(100, 150, 255, 0.15)），偏移一点（0 4px 12px），模拟光源方向 - 第三层用不透明色（
rgba(0, 0, 0, 0.08)）加小偏移（0 2px 4px），强化卡片立体感 - 别用纯黑或纯白做阴影，容易发灰；优先选主色调的弱饱和变体
为什么 card 元素加了多层 box-shadow 还是扁平没层次
常见原因是所有阴影都用了相同 blur-radius 和 spread-radius，导致视觉深度坍缩。分层必须拉开参数梯度：外层要虚、远、淡；内层要实、近、略重。
- 外层阴影：大
blur-radius（16–32px）、零或负spread-radius、无偏移或轻微正偏移 - 中层阴影：中等
blur-radius（8–12px）、+1–2pxspread-radius、y-offset2–4px 模拟光照角度 - 内层阴影：小
blur-radius（2–4px）、0spread-radius、y-offset1px，只压底部边缘 - 注意：Chrome 渲染多层
box-shadow时，若某层blur过大且透明度过高，可能被光栅化吞掉细节，建议最大blur不超 40px
box-shadow 分层配色在 dark mode 下失效怎么办
不是失效，是明暗反差逻辑翻转了——浅色阴影在深背景上不可见，而深色阴影在浅背景上才成立。不能复用同一套值，得按模式切换色值本身。
- 用
@media (prefers-color-scheme: dark)单独覆盖box-shadow值，不要依赖color-scheme: light默认回退 - dark mode 下，把原
rgba(0, 0, 0, 0.08)改成rgba(255, 255, 255, 0.06)，模糊值保持不变 - 避免用
hsl()动态计算，CSS 不支持 hsl 通道级 alpha 控制，容易出偏色 - 如果用 CSS 自定义属性传色值，确保 JS 注入时也同步更新
--shadow-inner等变量，否则媒体查询不会重算
移动端 Safari 对多层 box-shadow 的渲染异常
iOS 15+ 之前版本对超过 3 层 box-shadow 的合成有性能降级，表现为卡顿或部分阴影消失，尤其在滚动容器里。
- 实测安全上限是 3 层：1 层氛围 + 1 层光照 + 1 层压边，再多就拆到伪元素里（比如用
::after承载最外层大模糊） - 避免在
position: fixed或transform: translateZ(0)元素上堆叠多层，Safari 会强制切到 CPU 合成 - 用
will-change: box-shadow反而加重问题，iOS WebKit 对该属性优化极差，直接删掉 - 检查是否混用了
filter: drop-shadow()—— 它和box-shadow不共用渲染管线，叠加时会出现错位或闪烁
实际写的时候，最常被忽略的是：阴影层级和卡片 border-radius 必须匹配。圆角为 12px 的卡片，外层阴影的 blur-radius 超过 24px 就开始“溢出圆角”，看着像贴歪了。这个关系得手调，没有通用公式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
