直接写 --shadow: 0 2px 4px rgba(0,0,0,0.1) 会失效，因为 css 自定义属性不解析值，var(--shadow) 展开后作单个 token 被 box-shadow 拒绝；正确解法是拆分为多个变量分别声明并空格拼接，或改用 filter: drop-shadow()。
为什么直接写 --shadow: 0 2px 4px rgba(0,0,0,0.1) 会失效？
CSS 自定义属性（--xxx）本身不解析值，只是字符串容器。但当你用 var(--shadow) 替换到 box-shadow 等多值属性时，浏览器会把整个字符串当作单个 token 解析——空格不会被自动拆成多个参数，导致语法错误或被忽略。
常见现象：元素没阴影、DevTools 显示 box-shadow: invalid value、或只生效第一个数字（如 0）。
用引号包裹值 + unquote() 不行，别试了
有人想学 Sass 那套，给变量值加单引号：--shadow: "0 2px 4px rgba(0,0,0,0.1)"，再靠预处理器“去引号”。但原生 CSS 没 unquote()，var(--shadow) 取出来还是带引号的字符串，直接塞进 box-shadow 就是非法语法。
关键点：CSS 变量值里的引号是字面量的一部分，不是语法标记。
正确解法：拆成多个变量，用 calc() 或函数拼接
最稳的方式是把多值属性的每个部分单独存为变量，再组合使用。比如阴影的偏移、模糊、颜色分开存：
--shadow-offset-x: 0--shadow-offset-y: 2px--shadow-blur: 4px--shadow-color: rgba(0,0,0,0.1)
然后在属性里拼：
box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color);
注意：这里不能用 calc() 拼字符串，calc() 只处理数值运算；也不能用 concat()（CSS 还没这函数）。纯靠空格分隔的变量展开，是唯一可靠方式。
如果必须单变量存储，用 filter: drop-shadow() 替代
当组件需要动态切换整套阴影（比如主题色阴影），又不想拆变量，可以绕开 box-shadow，改用 filter: drop-shadow()：
- 它接受单个字符串值：
drop-shadow(0 2px 4px rgba(0,0,0,0.1)) -
--shadow-str: 0 2px 4px rgba(0,0,0,0.1)可以直接用：filter: drop-shadow(var(--shadow-str)); - 限制：只对元素整体投阴影，不支持
inset，且边缘可能有轻微渲染差异
真正麻烦的是既要 inset，又要单变量控制——这时候只能接受拆变量，没有银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
