css变量不能直接存储复杂阴影值，需拆解为--shadow-x、--shadow-y等参数分别定义后组合使用；若用单变量存多层阴影，必须用引号包裹并确保逗号空格正确。
CSS变量不能直接存储复杂阴影值，但可以拆解拼接
CSS自定义属性（--shadow）本身是字符串容器，不解析语法；所以你不能把 box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2) 整条塞进 --shadow 然后期望它“自动生效”。必须手动在 box-shadow 属性中用 var(--shadow) 引用，且该变量值需是合法的阴影语法片段。
用多个变量分别存偏移、模糊、颜色等参数更可控
把阴影拆成逻辑单元，避免字符串拼接出错：
-
--shadow-x：水平偏移（如0或2px） -
--shadow-y：垂直偏移（如4px） -
--shadow-blur：模糊半径（如8px） -
--shadow-spread：扩张半径（可选，默认0） -
--shadow-color：颜色（如rgba(0,0,0,0.15)）
然后组合使用：box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
多层阴影必须用单个变量存储时，字符串拼接要加引号并注意空格
如果硬要用一个变量存完整多层阴影（比如主题切换场景），必须确保：
- 整个值用单引号或双引号包裹（否则空格和逗号会被截断）
- 每层之间用英文逗号 + 一个空格分隔
- 所有单位、函数、括号都写全，不能省略
示例：
body {
--shadow-complex: '0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2)';
box-shadow: var(--shadow-complex);
}
⚠️ 注意：var(--shadow-complex) 必须直接用于 box-shadow 声明，不能放在 calc() 或其他函数里——CSS 不支持对字符串变量做运行时解析。
动态生成阴影（如JS控制）慎用 innerText 拼接
若用 JS 修改 style.setProperty('--shadow', ...)，别用 innerText 或模板字符串裸拼，容易漏空格或引号：
- ❌ 错误：
el.style.setProperty('--shadow', '0 2px 4px' + color)→ 缺少逗号和空格 - ✅ 正确：
el.style.setProperty('--shadow', `'0 2px 4px ${color}, 0 8px 16px ${darkColor}'`)（注意外层单引号） - 更稳做法：用数组
join(', ')拼多层，再包一层引号
浏览器对带引号的 var() 字符串兼容良好（Chrome 62+、Firefox 60+、Safari 15.4+），但旧 Safari 可能忽略引号内空格——真要兼容 IE 或老版本，就别走这条路，老老实实用多变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
