card hover 阴影不生效主因是漏写 transition，需在基础 .card 类加 transition: all .2s ease-in-out；hover 时配合 transform: translatey(-2px) 和增强 box-shadow 才显“浮起”效果，同时注意父容器 overflow: hidden 和 z-index 层级问题。
Card Hover 时阴影不生效，是不是忘了加 box-shadow 过渡？
Bootstrap 默认的 .card 没有 hover 动画，阴影是静态的。想让 hover 时“浮起来”，必须手动加 transition 和 hover 状态下的 box-shadow、transform。漏掉 transition 就会卡顿或无反应。
-
box-shadow值建议用 Bootstrap 自带的shadow-sm/shadow-md作基准，再在 hover 里增强（比如0 8px 24px rgba(0,0,0,.15)） -
transition必须写在非 hover 的基础 class 上，否则动画不触发 —— 推荐写成transition: all .2s ease-in-out; - 别只加
box-shadow，没transform: translateY(-2px)就只是变暗，不是“浮起”
为什么加了 transform 却没位移效果？
常见原因是父容器设置了 overflow: hidden（比如某些 Bootstrap .row 或自定义 wrapper），导致 transform: translateY(-2px) 被裁剪。另外，transform 和 box-shadow 都依赖元素有明确的 stacking context，如果 card 内部用了 position: relative 但没设 z-index，有时 shadow 会被兄弟元素盖住。
- 检查父级是否含
overflow: hidden；临时加overflow: visible测试 - 给
.card加z-index: 1（hover 时可设为z-index: 2），避免层叠问题 - 位移量别太大（
translateY(-4px)以上容易显得突兀），-2px～-4px 是较自然的浮动感
如何复用到所有 Card 而不污染全局样式？
直接改 .card:hover 会影响所有 Card，包括导航、表单里的卡片。更稳妥的方式是加一个专属 class，比如 .card-lift，只对需要交互的卡片启用。
.card-lift {
transition: all .2s cubic-bezier(.25,.8,.25,1);
}
.card-lift:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0,0,0,.12);
z-index: 2;
}
-
cubic-bezier(.25,.8,.25,1)比ease-in-out更轻盈，模拟真实“弹起”感 - Shadow 数值和颜色要匹配项目整体色调；深色主题下记得调低
rgba的 alpha 值（如.08） - 别在
:focus-within或:active里重复定义，除非需要键盘焦点支持
移动端 touch 设备上 hover 动画失效怎么办？
iOS Safari 和部分安卓浏览器对 :hover 支持不稳定，尤其在没有 cursor: pointer 的元素上。单纯靠 CSS 无法保证触屏设备触发 hover —— 必须加一层 JS 检测并补 class。
- 简单方案：给 card 加
onclick="void(0)"（仅作触发，不执行逻辑），激活 iOS 的 hover 模拟 - 更健壮做法：用 JS 判断
'ontouchstart' in window，动态加.card-lift-active类，再用touchstart/touchend控制 - 注意：别在 hover 动画里加
scale，缩放会触发重排，低端安卓机可能掉帧
