用transform位移比top/left更稳，因后者触发重排导致卡顿；transform走合成层保60fps，阴影需配合y-offset与blur动态变化才显真实悬浮，且须适配移动端touch交互。
hover时用transform位移比top/left更稳
直接改 top 或 left 触发重排，动画卡顿明显；transform: translateY() 只走合成层，60fps基本保得住。尤其卡片带阴影时，重排会连带阴影重绘，肉眼可见掉帧。
- 用
transform: translateY(-8px)代替top: -8px - 必须给父容器设
position: relative，否则transform不影响文档流，但悬浮效果仍成立 - 阴影用
box-shadow，别用filter: drop-shadow()—— 后者在 transform 动画中容易糊边或闪烁
relative定位在这里只起“锚点”作用
position: relative 本身不移动元素，只是为子元素的 absolute 定位提供参考系。但本例中它其实没被子元素使用——真正起作用的是卡片自身的 transform 和父容器的 overflow: hidden（防阴影溢出）。
- 删掉父容器的
position: relative，hover 动画照常工作 - 加它的唯一合理理由：后续要加
absolute子元素（比如角标、关闭按钮） - 如果只是为了 hover 浮起，
relative是冗余的，可删
阴影随位移变深才像“真悬浮”
纯位移看着像平移，加个动态阴影才符合物理直觉：越靠近视线，阴影越小越实；越抬高，阴影越扩散越淡。CSS 里靠同时调 box-shadow 的 y-offset 和 blur 实现。
- 默认状态：
box-shadow: 0 4px 12px rgba(0,0,0,0.1) - hover 状态：
box-shadow: 0 12px 24px rgba(0,0,0,0.15) - 别只改
blur值，y-offset 也要加大，否则像“沉下去”而不是“浮起来”
移动端hover失效？得补touch适配
手机没 hover 概念，单纯写 :hover 在 iOS/Android Chrome 里可能完全不触发。不是 bug，是规范行为。
- 加
@media (hover: hover) and (pointer: fine)做条件包裹，确保只在有悬停能力的设备上启用 - 更务实的做法：用
:focus-within或 JS 绑定touchstart切换 class，避免伪类失效 - 测试时别只在桌面浏览器点开 DevTools 切 mobile 模式——那只是模拟视口，不模拟 pointer 类型
真实项目里最容易漏的是 touch 适配和阴影的 y-offset 匹配。位移了 8px，阴影 y-offset 却只加了 2px，视觉上就“飘”不起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
