用CSS变量定义阴影应语义化命名（如--shadow-card）、全局挂载于:root，通过var(--shadow-card)调用并设fallback；多层阴影存为完整字符串，避免拆分拼接；注意IE不支持，且勿在rgba中嵌套calc()。
怎么用CSS变量定义可复用的阴影效果
直接用 --shadow-sm、--shadow-md 这类自定义属性存 box-shadow 值，是最轻量、最易维护的方式。它不依赖预处理器，原生支持，改一处全局生效。
关键不是“能不能”，而是变量名和值的设计是否贴合真实使用场景——比如你真会同时调用「内阴影 + 模糊半径 12px + z-index 分层」这种组合吗？多数时候只需要控制偏移、模糊、色值三要素。
- 把常用阴影拆成独立变量，比如
--shadow-x、--shadow-y、--shadow-blur、--shadow-color，再用var()拼装，灵活性高但写起来啰嗦 - 更推荐按语义命名：用
--shadow-card表示卡片浮起效果，--shadow-input-focus表示输入框聚焦态，值直接是完整box-shadow字符串 - 所有变量统一挂载在
:root下，确保全局可访问；若需主题切换（如深色模式），可在[data-theme="dark"]里重定义这些变量
为什么不能直接在 :root 里写 box-shadow: var(--shadow-card)
因为 box-shadow 是属性，不是自定义属性，不能直接赋值一个变量名。常见错误是写成这样：
body { box-shadow: --shadow-card; }
这不会生效——浏览器会忽略非法值。必须显式调用 var() 函数：
card { box-shadow: var(--shadow-card); }
另外注意：var() 只能在声明值的位置使用，不能用在选择器、@规则或属性名上。
-
var(--shadow-card)必须出现在属性值右侧，且该属性本身支持 CSS 函数（box-shadow支持） - 如果变量未定义，
var()默认返回空值，导致阴影消失，建议加 fallback：var(--shadow-card, 0 2px 4px rgba(0,0,0,.1)) - 不要试图用变量控制单个参数（如只换颜色），然后拼字符串——CSS 不支持字符串拼接，
calc(var(--shadow-x) + "px")是无效语法
box-shadow 多组值怎么用变量管理
当需要多层阴影（比如外光晕 + 内压边），box-shadow 值本身就是逗号分隔的列表。变量可以存整个列表，也可以分层存再合并。
推荐前者：把整套多层效果封装进一个变量，避免运行时拼接出错。例如：
:root {
--shadow-floating: 0 4px 12px rgba(0,0,0,.1), inset 0 -2px 4px rgba(0,0,0,.05);
}
这样既保持语义清晰，又避免因空格、逗号位置导致解析失败。
- 多层阴影之间用英文逗号分隔，前后空格不影响，但逗号后建议留一个空格提高可读性
- 不要把每层阴影拆成多个变量再用
var(--s1), var(--s2)拼——万一某层未定义，整个box-shadow会失效 - 如果某组件需动态叠加阴影（如 hover 时加一层），可用两个变量分别定义基础态和增强态，再在对应伪类中覆盖
兼容性与性能要注意什么
CSS 变量在所有现代浏览器都支持（Chrome 49+、Firefox 31+、Safari 9.1+），IE 完全不支持——如果项目还需兼容 IE，就得用预处理器变量或 JS 注入，但那就不是纯 CSS 方案了。
性能上几乎无损耗：变量只是文本替换，不触发重排重绘。但要注意别滥用嵌套 var()，比如 var(--shadow-with-color, var(--shadow-base))，虽然合法，但可读性和调试成本上升。
- 避免跨层级过度抽象，例如为每个
box-shadow单独建一套 x/y/blur/color 变量，实际维护时反而难定位 - 阴影值中慎用
rgba()的 alpha 动态计算（如rgba(0,0,0,calc(var(--opacity) * .1))），calc()在rgba()内部支持有限，Safari 曾有兼容问题 - 如果阴影要响应暗色模式切换，别只改颜色，模糊半径和偏移也常需微调——深背景上过强的模糊容易“发虚”，这是容易被忽略的视觉细节
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
