可行但需确保--shadow-offset值为含空格的合法片段（如“0 4px”），因css不支持运行时字符串拼接；拆分为--shadow-x、--shadow-y等语义变量更稳妥，深色模式应重定义整组阴影而非仅改色。
直接用 --shadow-color 和 --shadow-offset 分开定义，再在 box-shadow 里拼装，是可行的，但必须注意：CSS 不支持运行时字符串拼接，var(--shadow-offset) var(--shadow-color) 只有在两者值本身能合法组成阴影语法时才有效——比如 --shadow-offset: 0 4px 是合法片段，而 --shadow-offset: 4px 就不行。
为什么不能只拆“颜色”和“偏移量”两个变量
因为 box-shadow 的语法要求前四个参数（水平、垂直、模糊、扩散）都得是独立数值或长度单位，不能把“0 4px”这种组合塞进一个变量再指望它被自动解析为两个参数。浏览器读到 box-shadow: var(--shadow-offset) var(--shadow-color) 时，会把 var(--shadow-offset) 展开成字符串，然后原样拼接，最终可能得到 box-shadow: 0 4px rgba(0,0,0,.15) ——这看起来对，但前提是 --shadow-offset 的值必须包含空格分隔的两个合法值，且顺序固定。
- 常见错误：设
--shadow-offset: 4px，以为它会自动补上垂直偏移，默认为 0；实际不会，box-shadow: 4px rgba(...)是非法语法，整条声明被忽略 - 更稳妥的做法是拆成
--shadow-x、--shadow-y、--shadow-blur、--shadow-color四个变量，每个只管一个语义单元 - 如果真想少写几个变量，可把偏移+模糊打包成一个变量，如
--shadow-base: 0 4px 8px，再配--shadow-color，拼成box-shadow: var(--shadow-base) var(--shadow-color)
深色模式下改阴影深浅，只换 color 不够
在深色背景上，沿用 rgba(0,0,0,.15) 会导致阴影发灰、层次感丢失——不是透明度低了，是黑色在暗背景下对比度太弱。此时光改 --shadow-color 为 rgba(255,255,255,.08) 还不够，往往还需同步调小 --shadow-blur 或收窄 --shadow-spread，否则白影糊成一片。
- 推荐做法：定义一组语义化变量，如
--shadow-card，在:root里设默认值，在[data-theme="dark"]里重定义整个值，而不是只换颜色 - 避免在深色模式中用
calc()动态算rgba()里的 alpha 值——CSS 不允许在rgba()内部嵌套calc() - 测试时务必关掉开发者工具的“模拟深色模式”，改用系统级深色设置，否则
@media (prefers-color-scheme: dark)可能不触发
多层阴影怎么用变量管理才不翻车
多层阴影本质是逗号分隔的多个阴影片段，变量可以存整段字符串，也可以分层定义再合并。但后者容易因空格、逗号位置出错——比如漏了末尾逗号，或某一层的 var() 展开后末尾多了一个空格，导致语法断裂。
- 最稳的方式：用单个变量存完整多层值，如
--shadow-floating: 0 4px 6px rgba(0,0,0,.1), 0 10px 15px rgba(0,0,0,.1) - 若需动态控制某一层（比如 hover 时加一层内阴影），建议单独定义
--shadow-inset，再用box-shadow: var(--shadow-base), var(--shadow-inset)拼接 - 不要写
box-shadow: var(--shadow-layer-1), var(--shadow-layer-2), var(--shadow-layer-3)然后指望它们永远对齐——一旦某层变量未定义，var()返回空值，中间就多出一个逗号，整个声明失效
真正难的不是定义变量，而是让每一处 var() 调用都落在合法的语法位置上；哪怕值是对的，只要拼出来不是浏览器能 parse 的阴影语法，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
