单个CSS变量存多层阴影必须加引号且严格控制空格逗号，否则解析失败；拆解为多个语义化变量再拼接更稳定，尤其适用于主题切换和JS动态修改场景。
直接用单个 CSS 变量存多层阴影字符串是可行的，但必须加引号、严格控制空格和逗号；拆成多个语义变量再拼接更稳定，尤其在主题切换或 JS 动态修改时不容易出错。
多层阴影必须用引号包裹才能存进单个变量
浏览器把 --shadow 当作纯字符串容器，不解析语法。如果你写：
: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() - 引号内每层之间必须是英文逗号 + 一个空格，多空格或无空格都会导致整条声明无效
拆解为 --shadow-x、--shadow-y 等变量更可控
当你需要分别控制各层参数（比如深色模式下调小第二层模糊半径），硬拼字符串很快失控。拆解后组合逻辑清晰：
: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);
}
注意：
- 每个变量都必须带单位（如
2px，不能只写2） - 所有变量名要一致命名，避免
--shadowY和--shadow-y混用 - 多层之间用英文逗号分隔，末尾不能有逗号
JS 动态改多层阴影时，引号和空格错误会导致整条失效
用 element.style.setProperty('--shadow', ...) 修改时，最容易踩的坑是忘记引号或单位：
- ❌ 错误：
element.style.setProperty('--shadow', '0 4px 8px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.2)');（没引号，逗号被截断） - ✅ 正确：
element.style.setProperty('--shadow', '"0 4px 8px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.2)"'); - ⚠️ 更稳妥：用拆解变量方式，JS 只改
--shadow-blur-2，不碰字符串拼接
测试时打开开发者工具，检查 computed 栏里的 box-shadow 值是否完整显示——如果为空或只有一层，大概率是引号或空格问题。
深色模式下别只换颜色，多层阴影需整体重定义
在 [data-theme="dark"] 里只改 --shadow-color，第二层可能糊成一片白影。因为暗背景上 rgba(255,255,255,0.1) 的对比度太低，又没同步收窄 --shadow-blur-2。
推荐做法：
- 定义语义化变量组，如
--shadow-card-sm、--shadow-card-lg - 在
:root和[data-theme="dark"]中分别赋值完整多层字符串 - 避免在
rgba()里嵌套calc()，CSS 不支持
真正麻烦的是多层阴影 + 主题切换 + JS 实时调节三者叠加，这时候单变量字符串方案几乎必然翻车，拆解变量才是可维护的底线。
