悬停升起效果用transform: translateY()而非top，因top触发重排、性能差且无法平滑过渡阴影；translateY(-8px)属GPU加速合成层操作，兼容性好、无需preserve-3d，配合box-shadow双层过渡更自然。
悬停升起效果为什么用 transform: translateZ() 而不是 top？
用 top 移动会触发重排（reflow），性能差，且无法配合 box-shadow 自然过渡；transform: translateY(-8px) 或 translateZ(4px) 属于合成层操作，GPU 加速，动画更顺滑。Bootstrap 5+ 默认卡片无 transform-style: preserve-3d，所以优先选 translateY 更稳妥。
-
translateY(-8px)是最常用、兼容性最好（IE10+）、无需额外样式支持的方案 -
translateZ(4px)需父容器设transform-style: preserve-3d，否则无效；仅在需要 Z 轴深度感（比如配合透视）时才用 - 避免混用
top和transform，会导致浏览器渲染行为不一致
如何让 box-shadow 在悬停时变大变深而不突兀？
关键在「多层阴影叠加 + 过渡平滑」。单层大阴影容易发虚或边缘生硬；用两层：一层近距高模糊（突出立体感），一层远距低透明度（扩展空间感）。所有阴影值必须统一用 transition 控制，且只过渡 box-shadow 和 transform，别加 all。
- 默认状态推荐：
box-shadow: 0 2px 4px rgba(0,0,0,0.1) - 悬停状态推荐：
box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1) - 必须写：
transition: transform 0.3s ease, box-shadow 0.3s ease（时间值保持一致，否则会出现“先升后影”或“影到升没到”的割裂感）
Bootstrap 卡片类名冲突导致悬停无效怎么办？
常见原因是 Bootstrap 自带的 .card 有 transition（如 v5.3 中默认含 transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out），会覆盖你自定义的 transition。必须显式重置并覆盖。
- 在自定义 class（如
.card-hover-rise）中，用!important确保transition生效（仅此处合理使用） - 不要直接改
.card，避免影响全局；给卡片加额外 class：<div class="card card-hover-rise"> - 如果用了 Bootstrap 的
border或bg-*工具类，确认它们不带意外的transition—— 某些主题包会注入全局过渡
移动端触摸设备上悬停失效或误触发？
纯 :hover 在 iOS/Android 上不可靠：第一次点击触发 hover，第二次才真正进入，且离开无明确“unhover”事件。不能只依赖 :hover。
立即学习“前端免费学习笔记（深入）”；
- 对需要触控友好的场景，用 JavaScript 补充：监听
touchstart添加临时 class，touchend移除（注意防抖，避免快速连点） - 或者改用
@media (hover: hover)媒体查询包裹纯 hover 样式，确保只在支持 hover 的设备上启用 - 慎用
pointer-events: none类似 hack，它会阻断所有交互，包括按钮点击
实际生效的最小可用代码块长这样：
.card-hover-rise {
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.card-hover-rise:hover {
transform: translateY(-6px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1);
}
记住：transform 值别设太大（>12px 易出界），box-shadow 的第三参数（模糊半径）别超 32px，否则在低端安卓机上可能糊成一片。 
