<p>应使用@for循环控制景深偏移量，以#{$i * 0.8px}等缓变节奏替代线性增长，配合unquote(join())解包阴影列表、alpha线性衰减及移动端层数限制（≤4），确保真实贴附感与性能平衡。</p>
用 @for 循环控制偏移量生成景深层次
直接写死多层 box-shadow 值，偏移量容易线性爆炸——比如第 1 层 0 2px、第 2 层 0 4px、第 3 层 0 6px，结果阴影迅速飘离元素，失去“贴附感”。真正有层级的偏移应缓步拉开：内层微动（聚焦），外层渐远（暗示深度）。
实操建议：
-
@for $i from 1 through $layers是唯一推荐方式；@each和@while在固定层数场景下语义不清或易卡编译 - 垂直偏移别写
#{$i}px，而要用#{$i * 1.2px}或#{$i * 0.8px}控制增长节奏，避免第 5 层突然跳到5px - 水平偏移通常保持
0，除非刻意做斜射光效；若需轻微角度，可用#{$i * 0.3px} #{$i * 0.8px}模拟自然光入射方向 - 别让偏移量超过
blur的 1/3，否则阴影会断裂、悬浮感过强，破坏“压在表面”的真实感
unquote(join()) 是拼接多层阴影的强制步骤
SCSS 函数返回的阴影列表如果不经处理，会被编译成带引号字符串，例如："0 1px 2px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.05)"，浏览器直接忽略整条 box-shadow 声明。
必须走两步：
立即学习“前端免费学习笔记（深入）”；
- 先用
append($list, $shadow, comma)把每层阴影推入列表 - 再用
unquote(join(", ", $list))解包——join()合并，unquote()去引号，缺一不可 - 不能把
rgba()等函数调用塞进unquote()里动态算色，它们必须提前求值为字符串，否则编译报错
移动端慎用超过 4 层的偏移叠加
每增加一层阴影，渲染管线就要多算一次高斯模糊。当偏移量随层数持续增大（如第 4 层已达 0 5px），加上 blur 扩散，总视觉面积可能突破 200px²，iOS Safari 和部分安卓 WebView 会掉帧甚至禁用部分模糊。
适配建议：
- 移动端设
$layers: 3起步，用@media (min-width: 768px)在桌面端升到 5–6 层 - 对
overflow: hidden的父容器做专项检查——偏移加 blur 后阴影必然外溢，父级裁剪等于直接砍掉景深 - 避免在
position: fixed元素上堆叠过多偏移层，某些安卓浏览器会错误复位 transform-origin，导致阴影错位
颜色透明度衰减必须与偏移节奏解耦
常见错误是把 $alpha 和 $i 绑定太紧，比如 0.12 / $i，导致第 1 层过浓（0.12）、第 4 层过淡（0.03），中间断层明显。偏移量反映空间距离，透明度应反映大气衰减，二者速率不同。
更稳的写法：
- 用
$alpha: 0.08 - ($i * 0.015)这类线性衰减，确保第 1–5 层落在 0.065–0.005 区间，肉眼可辨但不突兀 - 颜色统一走
var(--shadow-color)，而非硬编码rgba(0,0,0,...)，方便深色模式切换时全局响应 - 别混用
#000和rgba()——不透明色会完全盖住其后所有透明层，破坏光晕叠加逻辑
偏移量不是越多越好，而是要和 blur、alpha、父容器约束一起算总账。最容易被忽略的是：你调得再准，只要父级有 overflow: hidden 或元素用了 transform: scale(0.99)，景深就立刻塌陷。
