用--shadow-x和--shadow-y控制box-shadow偏移量并配合transition:box-shadow，可实现真实“上浮+倾斜”深度感；关键在于显式声明带单位的变量、仅更新变量值、将transition写在box-shadow属性上且作用域正确，避免单位缺失、继承断裂及safari卡顿。
直接结论：用 --shadow-x 和 --shadow-y 控制 box-shadow 偏移量，配合 transition: box-shadow，就能做出真实可信的“上浮+倾斜”深度感——不是靠加大模糊值，而是让阴影往右下位移。
为什么只改 --shadow-x 和 --shadow-y 就够了？
卡片“变立体”的视觉线索，主要来自阴影在水平和垂直方向的位移变化，而非单纯变大或变模糊。人眼会把右下偏移的阴影解读为“卡片抬起来了、离背景更远了”。CSS 变量刚好能把这两个偏移抽出来单独控制：
-
--shadow-x和--shadow-y必须在基础状态（如.card）里显式声明，默认值推荐0px，且单位不能省略 - hover 时只更新这两个变量，不要重写整个
box-shadow声明，否则transition会断掉 - 浏览器对
box-shadow的插值是逐参数进行的，只要所有值单位一致（比如全是px或全是deg），就能平滑过渡
transition 必须写在 box-shadow 上，而不是变量名上
CSS 变量本身不可动画，transition: --shadow-x 0.2s 完全无效。真正被浏览器插值的是它所参与的属性：
- 必须写
transition: box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1)，且这条声明要放在使用var(--shadow-x)的选择器里（比如.card） - 如果把
transition写在:root或 hover 块里，它不会生效 - 想加缓动但又不想写太长，
cubic-bezier(0.2, 0, 0, 1)比ease-out更贴合“抬起-停稳”的物理节奏
常见翻车点：单位缺失、作用域错位、Safari 卡顿
这些细节不处理，效果就容易“假”或“卡”：
- 变量值写成
--shadow-x: 2（无单位）→ 浏览器无法解析为长度，box-shadowfallback 到默认值，阴影消失 -
--shadow-x定义在:root，但.card用了all: unset或重置样式 → 变量继承断裂，hover 时没变化 - Safari 旧版本（iOS 14 / macOS 11 之前）对多层
box-shadow插值有掉帧问题，建议--shadow-y不超过6px，避免在低端设备上明显卡顿
真正难的不是写几行 CSS，而是理解变量只是“中转站”，动画发生在它被消费的地方；而“立体感”的说服力，藏在 2px 和 4px 这种微小偏移的精准配比里——差一点，就只是“动了”，而不是“浮起来了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
