应使用 transform: translateY() + transition 实现卡片悬停上移，因 margin-top 或 top 会触发重排导致卡顿、错位及父容器撑开；transform 走合成层、GPU 加速且不干扰布局，需配合 box-shadow 和 z-index 变化，并注意移动端焦点替代及父容器 overflow 问题。
直接用 transform: translateY() + transition 是唯一高效路径，改 margin-top 或 top 会触发重排、卡顿、错位。
为什么不能用 margin-top 实现上移
改 margin-top 会让浏览器重新计算整个文档流位置，动画掉帧明显，尤其在低端安卓机或密集卡片网格中。更糟的是，它可能撑开父容器高度，导致相邻行卡片跳动。而 transform: translateY(-8px) 只走合成层，GPU 加速，不干扰布局。
- 别写
.card:hover { margin-top: -8px; }—— 这是性能陷阱 - 必须加
transition: transform 0.2s ease-out;到常态.card规则里，不是只写在:hover中 - 负值才上移：
translateY(-6px)合理，translateY(6px)是下移
阴影和层级必须同步变化
只动卡片不带动阴影，视觉上就像“飘起来但影子还钉在地上”。Bootstrap 的 .card 默认有 box-shadow，但悬停时若没显式覆盖，阴影不会加深或位移。
- 在
.card:hover里同时写transform: translateY(-6px)和box-shadow: 0 6px 12px rgba(0,0,0,.15) - 加
z-index: 10（别用auto），否则悬停卡片可能被右边或下边的兄弟元素遮住 - 避免混用
shadow-sm和自定义box-shadow—— 后者会被前者工具类的 !important 覆盖
移动端点按失效不是 bug，是必须绕过的事实
iOS Safari 和 Android Chrome 在真机上不把单次点击当 hover，这是规范行为。纯 CSS :hover 在触屏设备上基本不可靠。
立即学习“前端免费学习笔记（深入）”；
- 别依赖
@media (hover: hover)做判断 —— iOS 真机常返回false，白写 - 底线方案：给卡片加
tabindex="0"，再写.card:focus { transform: translateY(-6px); }，兼顾键盘与触摸 - 如需强反馈，用 JS 切换
is-lifted类，但注意避免在快速连点时状态残留
真正容易翻车的地方不在代码，在布局容器
写了三行 CSS 却发现卡片悬停后边缘被裁、阴影消失、上移后文字模糊——大概率是父容器惹的祸。
- 检查是否套在
.card-group或设置了overflow: hidden的.row/ 自定义 wrapper 里；box-shadow和transform都会被硬裁 - 如果用了
h-100，确认父级.row没加align-items-start—— 否则悬停上移后卡片底部会露白边 -
will-change: transform推荐加在常态.card上，但别滥用；加太多反而触发不必要的图层合成，得不偿失
