box-shadow多层叠加“糊成一团”是因渲染顺序错误：大模糊阴影应置于后层，锐利阴影放前层；spread负值可收紧边缘，blur与spread配比决定立体感；inset阴影需写在最后才能浮于表面；响应式需用css变量或clamp()动态调整。
box-shadow多层叠加时，为什么阴影看起来“糊成一团”
不是参数写错了，而是渲染顺序和视觉权重没对齐。浏览器按你写的顺序从左到右逐层绘制：第一个阴影在最上层，最后一个在最底层。如果把大模糊的放前面，它会盖住后面所有细节，导致层次塌陷。
常见错误现象：box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.15) —— 模糊大的先画，小的被压住，结果只剩一层发虚的影子。
- 正确顺序：锐利/偏移小/正spread的放前面（近距投影），大blur/低透明的放后面（环境漫射）
- 典型组合：
0 2px 6px -2px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.08) - spread为负值（如
-2px）能收紧近距阴影边缘，避免和元素本体脱节 - 两层足够，三层以上在滚动或hover动画中易掉帧，尤其Android低端机
用blur和spread配合控制“浮起感”，而不是只调blur
单独拉大blur只会让阴影变淡、发散，反而削弱立体感。真正塑造“离地高度”的是blur和spread的配比：前者决定软硬，后者决定体积。
比如卡片悬浮时，人眼感知的“抬升”主要来自阴影变大+变暗，而非单纯变虚。
-
blur建议范围：4px–12px（太小像描边，太大失真） -
spread建议范围：-4px（内收压边）到 +4px（外扩显远），超过±4px容易失真 - 实用公式：近距层用
0 2px 6px 2px（小偏移+正spread显厚实），远距层用0 12px 24px 0（大模糊+零spread保扩散） - 别用
blur: 0做锐利阴影——它在高DPI屏上边缘锯齿明显，改用blur: 1px更稳妥
inset阴影和外阴影混用时，高光总被盖住
内阴影（inset）默认绘制顺序低于外阴影，所以写成box-shadow: inset ..., ...时，inset那层永远在最底下。想让它“浮”在表面当高光，得手动提层。
常见错误现象：按钮按下态用inset 0 2px 4px rgba(255,255,255,0.3)，但阴影颜色完全看不见。
- 解决方案：把
inset阴影写在逗号最右侧（最后绘制=最上层） - 示例：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8) - 注意
inset不支持spread，想加体积感只能靠blur或叠两层inset - 搭配
border用：给元素设border: 1px solid transparent，能让inset阴影贴合边缘不溢出
响应式下阴影失衡，缩放后显得过重或消失
box-shadow的像素值不会随transform: scale()或媒体查询里的容器尺寸变化而自动缩放。375px屏上0 8px 24px的阴影，在桌面端会显得单薄，在手机上则压迫文字。
别用rem或em单位——它们不继承字体大小，1rem始终是16px，和阴影实际需要的视觉重量无关。
- 推荐做法：用CSS自定义属性统一控制，例如
--shadow-depth: 4px - 在
@media (max-width: 768px)里覆盖为--shadow-depth: 2px，然后所有阴影写成0 var(--shadow-depth) ... - 更精细的控制可结合
clamp()：calc(clamp(2px, 2.5vw, 4px))，兼顾小屏收敛和大屏舒展 - 动画中慎用
scale同时改阴影——过渡会卡顿，优先用transform: translateY()配阴影微调
transform: translateY(-4px)抬起时，box-shadow的v-offset也该略减（如从2px调到1px），否则阴影还“蹲”在原地，看起来像悬空。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
