--shadow-x 和 --shadow-y 通过控制 box-shadow 的水平与垂直偏移量实现悬浮“深度感”，需在 :root 或选择器中声明带单位的默认值（如 0px），hover 时仅更新变量，transition 必须作用于 box-shadow 属性本身（非变量），且所有 shadow 参数单位须一致；calc() 可实现偏移比例联动，但变量必须带单位且运算合法。
用 --shadow-x 和 --shadow-y 动态控制 box-shadow 偏移
卡片悬浮时的“深度感”本质是阴影在 X/Y 方向的位移变化，不是单纯加大模糊值。CSS 自定义属性能让你把偏移量抽出来，配合 :hover 平滑过渡。关键点在于：box-shadow 的前两个长度参数就是水平和垂直偏移，必须用变量承接，且不能省略单位（如 px）。
常见错误是写成 box-shadow: var(--shadow-x) var(--shadow-y) 8px rgba(0,0,0,0.1)，但没给变量设初值，或用了无单位数值导致计算失败。
-
--shadow-x和--shadow-y必须在 :root 或组件选择器里显式声明，默认值建议设为0px - hover 时只改这两个变量，不要重写整个
box-shadow声明，否则 transition 失效 - 过渡必须加在
box-shadow上，不是变量名上：transition: box-shadow 0.2s ease;
card {
--shadow-x: 0px;
--shadow-y: 0px;
box-shadow: var(--shadow-x) var(--shadow-y) 6px rgba(0,0,0,0.08);
transition: box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
}
<p>card:hover {
--shadow-x: 2px;
--shadow-y: 4px;
}</p>
为什么不能直接 transition 变量本身
CSS 变量本身不可动画，浏览器不识别 transition: --shadow-x 0.2s。你看到的“变量动了”，其实是它被引用的地方（比如 box-shadow）发生了重计算和插值。所以变量只是中间载体，真正需要过渡的是使用它的 CSS 属性。
典型翻车场景：在 hover 里只改变量，但没在基础状态声明 transition，或者把 transition 写在变量声明块里——这完全无效。
- 所有参与动画的变量，其引用属性（如
box-shadow）必须带transition - 变量值必须带单位，
2和2px在 calc() 或 shadow 中行为不同，后者才被当作长度解析 - 如果同时想动模糊半径或颜色，也得用变量，但要确保所有 shadow 参数单位一致，否则 fallback 会出错
兼容性与性能注意点
Chrome 49+、Firefox 31+、Safari 9.1+ 都支持自定义属性 + box-shadow 动画，但 Safari 旧版本对 box-shadow 的 transition 插值有卡顿。实际项目中，避免让 --shadow-y 超过 8px，否则在低端设备上容易掉帧。
- 阴影偏移超过
6px后，视觉深度提升边际递减，但渲染开销明显上升 - 不要在大量卡片上同时 hover 触发动画，考虑加
will-change: box-shadow（仅限必要场景） - 若需适配 IE，变量方案不可用，得回退到 class 切换 + 预设 shadow 值
用 calc() 微调偏移比例更灵活
有时你希望 Y 偏移始终是 X 的两倍，或者随缩放动态调整。这时候直接写死 --shadow-y: 4px 就不够用了，改用 calc() 绑定关系：
card {
--shadow-x: 1px;
box-shadow: var(--shadow-x) calc(var(--shadow-x) * 2) 6px rgba(0,0,0,0.08);
}
<p>card:hover {
--shadow-x: 3px; /<em> y 自动变成 6px </em>/
}</p>
这种写法让偏移保持比例，但要注意：calc() 里的乘法只能是数字 × 数字，不能是 px × px，所以变量本身必须带单位，且只参与一次运算。
真正难调试的是多层嵌套 calc 和变量依赖，比如 --shadow-y: calc(var(--base) * var(--scale)) —— 这时只要有一个变量没定义或单位缺失，整条 box-shadow 就失效，浏览器静默降级为空值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
