应使用 transform: translatey() 而非 margin-top 或 top 实现上浮，因其不触发重排、不干扰布局；transition 必须写在常态规则中且显式声明属性；box-shadow 需同步调整 offset-y、blur-radius 和 alpha 值以模拟真实光影；移动端需用 focus 或 js 替代 hover；注意父容器 overflow 等限制。
为什么不能用 margin-top 或 top 实现上浮
改 margin-top 会触发浏览器重排（reflow），动画掉帧明显，尤其在低端安卓机或密集卡片网格中；更糟的是，它可能撑开父容器高度，导致相邻行卡片跳动。而 transform: translateY(-6px) 只走合成层、GPU 加速，不干扰布局，也不会影响兄弟元素位置。
transition 必须写在常态规则里，不是只写在 :hover
必须把 transition: transform 0.2s ease-out, box-shadow 0.2s ease-out 写在常态的 .card 规则中，而不是只塞进 .card:hover。否则首次悬停会突变，且浏览器无法预判动画路径，容易卡顿。
- 别写
transition: all 0.2s——它会拖慢响应，还可能意外过渡border-color或opacity - 必须显式列出
transform和box-shadow，哪怕你没在常态设transform - 加
will-change: transform（可选）能提前提示渲染引擎，但别滥用，尤其卡片超 20 个时
阴影变化必须同步 offset-y、blur-radius 和 alpha 值
只加大 box-shadow 的 y 偏移或模糊半径，会导致阴影边缘发虚、抖动，尤其在高 DPI 屏幕上。真正自然的上浮，是模拟物体抬离平面后的光影衰减：
- offset-y 减小：比如从
4px→2px（让卡片“离地”） - blur-radius 增大：比如从
12px→20px（模拟阴影扩散） - alpha 值降低：比如从
rgba(0,0,0,0.15)→rgba(0,0,0,0.08)（模拟光衰减）
示例：box-shadow: 0 2px 20px rgba(0,0,0,0.08) 配合 transform: translateY(-6px)
移动端点击无反馈不是 bug，是必须绕过的事实
iOS Safari 和 Android Chrome 在真机上不把单次点击当 :hover，这是规范行为。纯 CSS :hover 在触屏设备上基本不可靠。
- 别依赖
@media (hover: hover)判断——iOS 真机常返回false - 底线方案：给卡片加
tabindex="0"，再写.card:focus { transform: translateY(-6px); }，兼顾键盘与触摸 - 如需强反馈，用 JS 切换
is-lifted类，但注意快速连点时状态残留问题
真正容易翻车的地方不在代码，在布局容器——写了三行 CSS 却发现卡片悬停后边缘被裁、阴影消失、上移后文字模糊，大概率是父容器的 overflow: hidden 或 h-100 惹的祸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
