card hover 阴影需用 css 的 .card:hover { box-shadow: ... } 实现，配合 transition 确保平滑，避免布局跳动；bootstrap 内置 shadow-* 类不支持 hover，不可直接复用。
Card Hover 时添加阴影的 CSS 实现方式
Bootstrap 自带的 .card 组件默认没有 hover 阴影效果，必须手动加 CSS。直接改 box-shadow 是最轻量、兼容性最好的办法，不需要 JS 或额外类名。
- 推荐在自定义 CSS 文件里写：
.card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }（对应 Bootstrap 5 的默认阴影强度） - 若用 Bootstrap 4，原生
shadow-*<code> 类（如 <code>shadow-sm）不响应 hover，得靠 CSS 覆盖；!important是为了确保压过.card默认的box-shadow: none - 别用
transition控制渐变？必须加，否则阴影突兀出现：.card { transition: box-shadow .2s ease-in-out; }
为什么不能只靠 Bootstrap 内置类实现 hover 阴影
Bootstrap 的 shadow- 系列工具类（如 shadow-lg）是静态 class，不支持伪类选择器。你没法写 .card:hover.shadow-lg 让它生效——因为 .shadow-lg 本身没定义 hover 状态下的样式。
- 试图用
class="card shadow-lg"+:hover覆盖？不行，.shadow-lg的box-shadow值会被.card的重置覆盖 - 想用
data-bs-toggle或 JS 切换类？过度设计，纯 CSS 就能解决的事没必要触发 DOM 操作 - 移动端 Safari 可能忽略
:hover？确实存在，但卡片 hover 本就不是触屏主交互，保留即可，不必降级处理
不同 Bootstrap 版本的阴影值参考
各版本 box-shadow 默认值不同，直接复制可能太淡或太重。对照官方源码微调更稳妥：
- Bootstrap 5.3：
0 .5rem 1rem rgba(0,0,0,.15)（推荐起始值） - Bootstrap 4.6：
0 .125rem .25rem rgba(0,0,0,.075)，hover 时可翻倍为0 .5rem 1rem rgba(0,0,0,.15) - 如果卡片背景是浅色（如
bg-light），建议把rgba()第三个参数调高到.2，否则阴影几乎看不见
容易被忽略的布局干扰点
加了 hover 阴影后，卡片可能“跳动”或挤开相邻元素——这不是 bug，是阴影扩大了元素渲染尺寸导致的重排。
- 解决方案：给
.card加margin预留空间，例如mb-3改成mb-4，或者统一设margin: 0.5rem - 用
transform: translateY(0)强制开启 GPU 加速？没必要，box-shadow本身已硬件加速，加 transform 反而可能引发模糊 - Grid 或 Flex 布局下，阴影超出父容器被裁剪？检查父容器是否设了
overflow: hidden，删掉或改成overflow: visible
