用margin-top或top会导致卡片悬停抖动，因其强制触发布局重排（reflow），撑开父容器并引发相邻卡片跳动；必须改用transform: translateY()实现GPU加速位移，且需确保hover前后盒模型尺寸完全一致。
为什么用 margin-top 或 top 会让卡片悬停时抖动
因为这两类属性会强制浏览器重新计算文档流位置，触发重排（reflow）。尤其在密集卡片网格中，一个卡片上移可能撑开父容器高度，导致相邻行卡片跳动。视觉上就是“卡顿+错位+边缘抽搐”，不是动画没写好，是布局被反复打断。
必须改用 transform: translateY()：它只走合成层（composite），GPU 加速，不改变元素在文档流中的占位，box-shadow 和 z-index 才能同步生效而不冲突。
- 别写
.card:hover { margin-top: -8px; }—— 这是性能陷阱 -
transform必须配合position: relative或absolute才能正确锚定 - 过渡必须写在常态规则里：
.card { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
如何确保 hover 前后盒模型尺寸完全一致
抖动的隐藏元凶常是边框、内边距或阴影变化引起的尺寸突变。哪怕只是 border: 2px solid transparent 没写在常态里，hover 时加 border-color: #007bff 就会因初始无边框而多出 4px 占位，触发布局重算。
- 所有影响尺寸的属性（
border、padding、outline）必须在常态显式声明，且值完全一致 - 优先用
border: 1.5px solid transparent占位，hover 只改border-color；outline不参与布局但不支持圆角 - 检查
box-sizing是否生效：DevTools → Computed → 确认box-sizing是border-box，且未被重置样式覆盖 - 用
getBoundingClientRect()对比 hover 前后width、x、height—— 必须分毫不差
嵌套结构下 transform 缩放或位移为何仍会抖动
当卡片内部有子元素（如图标、按钮）也用了 transform，而父容器没隔离变换上下文，浏览器可能降级渲染图层，导致缩放后边缘跳动、文字模糊或阴影错位。
立即学习“前端免费学习笔记（深入）”；
- 直接包裹卡片的父容器必须加
transform-style: preserve-3d（不是写在卡片自身） - 避免
width/height与scale()混用：比如子元素设了width: 100%又transform: scale(1.1)，实际溢出会引发重排 - 移动端需额外加
text-size-adjust: none并锁定 viewport：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 慎用
will-change: transform—— 只在 hover 前临时添加，动画结束立即移除，否则图层合成开销反而升高
移动端和焦点设备上悬停效果为何失效
iOS Safari 和 Android Chrome 在真机上不把单次点击当 hover，这是规范行为，不是 bug。纯 CSS :hover 在触屏设备上基本不可靠，用户点一下卡片没反应，会误以为功能坏了。
- 别依赖
@media (hover: hover)判断 —— iOS 真机常返回false，白写 - 底线方案：给卡片加
tabindex="0"，再写.card:focus { transform: translateY(-6px); }，兼顾键盘与触摸 - 如需强反馈，用 JS 切换
is-lifted类，但注意快速连点时状态残留问题（建议加setTimeout清理） - 真正容易翻车的地方不在代码，在布局容器：检查是否套在
overflow: hidden的.row或.card-group里 ——box-shadow和transform都会被硬裁
