box-shadow 多重叠加必须用逗号分隔且不能依赖 var() 自动展开；需拆分为独立变量手动拼接，注意顺序、单位、inset 位置、fallback 默认值及移动端性能限制。
box-shadow 多重叠加必须用逗号分隔，不能靠 var() 自动展开
很多人误以为把一整串 box-shadow 值塞进一个 CSS 变量里就能复用，比如：--shadow-stack: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);，再写 box-shadow: var(--shadow-stack);——这会直接失效。浏览器不支持在 var() 中解析逗号分隔的多值列表。
真正可行的方式是：每个阴影层拆成独立变量，再手动拼接。例如：
:root {
--shadow-1: 0 4px 12px rgba(0,0,0,0.1);
--shadow-2: 0 2px 4px rgba(0,0,0,0.06);
--shadow-3: 0 0 0 1px rgba(0,0,0,0.05);
}
.fancy {
box-shadow: var(--shadow-1), var(--shadow-2), var(--shadow-3);
}
- 变量名带序号（如
--shadow-1）便于维护顺序，避免混淆 - 顺序很重要：浏览器按从左到右绘制，先写的在底层，后写的在顶层
- 别省略单位（如
4px写成4）——var()不会自动补单位
用 CSS 变量控制单层阴影参数，但需注意 fallback 陷阱
如果想动态调整某一层的模糊值或颜色，可以给每个维度单独设变量，比如：
:root {
--shadow-h: 0;
--shadow-v: 4px;
--shadow-blur: 12px;
--shadow-color: rgba(0,0,0,0.1);
}
.card {
box-shadow: var(--shadow-h) var(--shadow-v) var(--shadow-blur) var(--shadow-color);
}
但要注意：var(--shadow-blur) 如果未定义，整个 box-shadow 声明会完全失效（不是只丢这一层），因为 CSS 属性值解析是原子性的。
- 务必为所有变量提供默认值，例如：
var(--shadow-blur, 12px) - 颜色变量建议用
rgba()而非十六进制 + opacity，后者在 Safari 中兼容性差 - 偏移量变量不要混用单位（比如
--shadow-h: 0和--shadow-h: 2rem混用），会导致计算混乱
多层阴影 + inset 混合时，inset 必须写在对应那一层末尾
inset 不是全局开关，它只作用于它前面那一组参数。错误写法：box-shadow: var(--outer), var(--inner) inset;——inset 不会“传染”到 var(--inner) 的展开结果里。
正确做法是把 inset 写进变量值内部：
:root {
--shadow-outer: 0 4px 12px rgba(0,0,0,0.1);
--shadow-inner: 0 0 8px rgba(255,255,255,0.3) inset;
}
.element {
box-shadow: var(--shadow-outer), var(--shadow-inner);
}
- 每个含
inset的阴影必须独立声明，不能靠外部修饰 - 内阴影和外阴影混合时，建议把
inset层放在后面（视觉上更靠前），避免被外阴影盖住细节 - 使用
inset时，spread值若为负数可能让内边框“缩进过头”，需配合border-radius测试边缘裁切
移动端性能敏感区：blur > 16px 的多重阴影要谨慎
桌面端看着通透的三层大模糊阴影，在手机上容易糊成一块黑影，且触发软件渲染，尤其当元素有 border-radius 或处于滚动容器中时。
实测发现，以下组合在 iOS Safari 和部分 Android WebView 中明显掉帧：
-
blur > 16px且spread > 8px - 超过 4 层阴影，尤其含
inset+ 大blur - 在
transform: scale(0.9)或will-change: transform元素上动态修改box-shadow
替代方案：
- 用
filter: drop-shadow()替代部分外阴影（它对形状更友好，但不支持inset） - 响应式断点中，用媒体查询降级阴影层级：
@media (max-width: 768px) { .card { box-shadow: var(--shadow-1); } } - 动画中避免直接改
blur或color，优先用opacity或位移变化模拟反馈
最常被忽略的一点：多重阴影的视觉质量不取决于层数多少，而在于每层的透明度是否形成梯度（比如 0.1 → 0.06 → 0.03），否则所有层会“叠成一块灰”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
