最稳妥的做法是用 --elevation-n 存完整 box-shadow 字符串，如 --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1)，兼顾兼容性、可调试性与主题切换可靠性；拆分为多个变量易因缺失导致失效；深色模式需整套替换而非仅调色；fallback 必须为合法 box-shadow 值；多层及 inset 阴影须存整串字符串。
用 --elevation-N 存完整 box-shadow 字符串最稳妥
直接把整条 box-shadow 值塞进变量里，比如 --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1)，是目前唯一能兼顾兼容性、可调试性和主题切换可靠性的做法。拆成 --shadow-x、--shadow-blur 等单独变量看似灵活，但只要漏定义一个，整条 box-shadow 就失效——因为 var(--shadow-x) var(--shadow-y) 不是拼接，而是两个独立值，浏览器不会自动补空格或默认值。
为什么不能只改颜色就切深色模式
在 [data-theme="dark"] 下只重设 --shadow-color 是典型误区。黑色阴影在深色背景上对比度崩塌，光调 alpha 没用；实际需要同步收窄 --elevation-2 的模糊半径、甚至微调偏移量。语义化变量的优势就在这儿：你不是改一个参数，而是换一整套视觉逻辑。比如浅色下 --elevation-2 是 0 2px 4px rgba(0,0,0,0.1)，深色下直接换成 0 2px 3px rgba(255,255,255,0.08)，不依赖任何运行时计算。
fallback 必须写，且得是合法 box-shadow 值
var(--elevation-2, 0 2px 4px rgba(0,0,0,0.1)) 这种写法不是可有可无的保险丝，而是防止 JS 动态切换主题时变量尚未注入导致阴影彻底消失的关键。注意 fallback 本身必须是合法的 box-shadow 值，不能写成 var(--elevation-2, none)——none 不是 box-shadow 的合法取值，浏览器会忽略整条声明。
多层阴影和 inset 阴影别硬拆
像 box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 -1px 1px rgba(255,255,255,0.8) inset 这种组合，变量必须存整串字符串。试图用 var(--shadow-outer), var(--shadow-inner) 拼接，一旦某个变量未定义，逗号前后的部分都会失效。更麻烦的是，inset 关键字必须紧贴在对应阴影片段末尾，无法靠变量控制位置——它不是独立参数，是语法的一部分。
--elevation-1 到 --elevation-4 的命名里。后续所有组件只认这个编号，不关心像素值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
