单个--shadow变量存多层box-shadow可行但需加引号并严格格式；拆解为多个语义变量（如--shadow-x、--shadow-blur）再拼接更可维护；语义化命名（如--shadow-card）是轻量折中方案。
直接用单个 --shadow 变量存多层 box-shadow 值是可行的，但必须加引号、严格控制空格和逗号格式，否则浏览器只取前半截；拆成多个语义变量（如 --shadow-x、--shadow-blur）再拼接，才是长期可维护的选择。
单个变量存多层阴影：引号和空格必须精确
浏览器把 CSS 自定义属性当纯字符串容器，不解析语法。所以这行会失败：
:root { --shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2); }
实际只生效 0 2px 4px rgba(0,0,0,0.1)，后面全被截断。正确写法是：
- 给整个值加双引号或单引号：
--shadow: "0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2)"; - 引用时仍需显式调用：
box-shadow: var(--shadow);，不能漏掉var() - 引号内每层之间必须是英文逗号 + 一个空格：
,，多空格或无空格都会导致整条声明无效 - fallback 推荐加上：
box-shadow: var(--shadow, 0 2px 4px rgba(0,0,0,.1));，避免变量未定义时阴影消失
多变量拆解拼接：适合主题切换和 JS 动态修改
当你需要独立控制某一层的模糊半径（比如深色模式下调小第二层）、或用 JavaScript 修改颜色时，硬拼字符串很快失控。拆解后组合更清晰：
立即学习“前端免费学习笔记（深入）”；
:root {
--shadow-x: 0;
--shadow-y: 2px;
--shadow-blur: 4px;
--shadow-color: rgba(0,0,0,0.1);
--shadow-x-2: 0;
--shadow-y-2: 8px;
--shadow-blur-2: 16px;
--shadow-color-2: rgba(0,0,0,0.2);
}
.card {
box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color),
var(--shadow-x-2) var(--shadow-y-2) var(--shadow-blur-2) var(--shadow-color-2);
}
注意点：
- 每个
var()后必须有空格分隔参数，不能连写：var(--x)var(--y)是错的，必须是var(--x) var(--y) - CSS 不支持字符串拼接，
calc(var(--x) + "px")无效，所有单位要随变量一起定义好 - 如果某层完全不需要（比如临时禁用第二层），设
--shadow-x-2: 0并保持其他参数合法即可，不要留空值
按语义命名变量：比参数拆解更轻量的折中方案
多数项目不需要逐参数控制，而是按用途区分阴影类型。这时直接用语义化变量最省事：
:root {
--shadow-card: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.06);
--shadow-input-focus: 0 0 0 2px rgba(0,100,255,0.2);
}
.card { box-shadow: var(--shadow-card); }
input:focus { box-shadow: var(--shadow-input-focus); }
这种写法的优势：
- 无需在使用处拼接，代码干净，调试直观
- 主题切换只需重定义
:root[data-theme="dark"]下对应变量 - 避免因空格/逗号格式错误导致整条阴影失效
- 但要注意：不能用
box-shadow: --shadow-card这种写法——必须带var()，否则浏览器忽略
真正容易被忽略的是：多层阴影的绘制顺序影响视觉层次，写在前面的阴影在上层，写在后面的在下层。如果你把大模糊值放在最后，它会盖住前面所有细节。这不是变量问题，但变量管理方式（尤其是拼接逻辑）一旦固化，就很难回头调整顺序。
