不能将 box-shadow 参数拆为独立变量，因未定义任一变量会导致整条声明失效，且深色模式需整套参数调整、维护成本高、devtools 无法调试；应使用语义化完整值变量如 --elevation-1，并加 fallback、用 [data-theme="dark"] 切换、多层阴影逗号分隔、注意 inset 顺序与适配。
为什么不能把 box-shadow 的每个参数都拆成独立变量
因为 box-shadow 是一个完整声明值，浏览器不支持用 calc() 或字符串拼接组合它。写 box-shadow: var(--x) var(--y) var(--blur) var(--color) 看似合理，但只要其中任意一个变量未定义（比如漏了 --y），整条 box-shadow 声明就会被忽略——var() 的 fallback 只作用于单个变量，无法兜底整个属性。
更实际的问题是：深色模式下你真的只想改颜色？还是连偏移、模糊、扩散都要微调？多数设计系统中，--elevation-2 在浅色和深色下是两套完全不同的参数组合。硬拆变量会导致维护爆炸：每新增一个主题，就要同步更新 4–5 个变量；漏改一个，阴影就彻底错乱。
另外，DevTools 的颜色/长度编辑器只识别单个 CSS 值，拆开后无法直接拖拽调试。
应该用 --elevation-N 存完整 box-shadow 字符串
最可靠的做法是把每层阴影的完整值存为语义化变量，例如：
:root {
--elevation-1: 0 1px 2px rgba(0, 0, 0, 0.05);
--elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1);
--elevation-3: 0 4px 8px rgba(0, 0, 0, 0.15);
--elevation-4: 0 8px 16px rgba(0, 0, 0, 0.2);
}
<p>[data-theme="dark"] {
--elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3);
--elevation-2: 0 2px 4px rgba(0, 0, 0, 0.4);
--elevation-3: 0 4px 8px rgba(0, 0, 0, 0.5);
--elevation-4: 0 8px 16px rgba(0, 0, 0, 0.6);
}</p>
关键点：
- 务必加 fallback，比如
var(--elevation-2, 0 2px 4px rgba(0, 0, 0, 0.1))，避免变量未定义时阴影彻底消失 - 用
[data-theme="dark"]而不是@media (prefers-color-scheme: dark)，后者无法响应 JS 主动切换主题 - 所有变量统一挂载在
:root下，JS 可读可写：document.documentElement.style.setProperty('--elevation-2', '...')
多层阴影叠加必须写在同一行、用逗号分隔
常见错误是重复写 box-shadow 属性，比如：
.card {
box-shadow: var(--elevation-1);
box-shadow: var(--elevation-2); /* 覆盖上面那条 */
}
正确做法是把多层写进同一个声明里，按“近层→远层”顺序排列（最左在最上层）：
.card {
box-shadow:
var(--elevation-1, 0 1px 2px rgba(0, 0, 0, 0.05)),
var(--elevation-2, 0 2px 4px rgba(0, 0, 0, 0.1));
}
注意：
- 移动端真机（尤其 iOS Safari）对
blur > 10px或层数 > 3 会主动降级，可能截断 alpha 值或丢弃某层 - 避免用
rgba(0,0,0,0.05)这类极低透明度，旧 Android WebView 会四舍五入为 0 -
inset阴影默认在底层，想让它当高光，必须写在逗号最前面：box-shadow: inset ..., ...
inset 高光和外阴影混用时容易被盖住
很多人写 box-shadow: 0 2px 4px #000, inset 0 1px 0 #fff，结果高光看不见——因为 inset 默认绘制顺序低于外阴影，即使写在后面，也还是在底层。
解决办法只有两个：
- 把
inset写在最前面：box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 4px rgba(0,0,0,0.1) - 搭配
border: 1px solid transparent，让inset更贴合边缘不溢出
inset 不支持 spread，若需体积感，只能叠两层：inset 0 1px 0 ..., inset 0 2px 2px ...
真正难的不是写出三层阴影，而是让它们在不同 DPR、滚动状态、系统功耗模式下始终对齐不糊边——所有值若用 px，缩放时会失准；用 rem 或 clamp() 才能真正响应式适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
