直接用box-shadow控制Card Hover阴影，Bootstrap无内置hover阴影类；需同时设置transition、增大垂直偏移与模糊值，并配合transform: translateY(-4px)实现自然浮起效果，避免布局抖动和移动端失效。
Card Hover阴影效果用哪个CSS属性控制
直接改 box-shadow 就行，Bootstrap 本身不提供 hover 阴影的内置类，得自己加。默认 Card 的 box-shadow 是 0 0.5rem 1rem rgba(0,0,0,.15)（v5.3），hover 时加大偏移和模糊值就能出“浮起”感。
常见错误是只调大 box-shadow 模糊半径，但没增加垂直偏移，结果像发光而不是上浮；或者用了 transform: translateY(-4px) 却忘了加 transition，导致跳变卡顿。
- 必须给
.card加transition: box-shadow .2s ease-in-out, transform .2s ease-in-out - hover 时同时改
box-shadow和transform: translateY(-4px)效果最自然 - 别用
!important覆盖 Bootstrap 的默认过渡，优先提高选择器权重（比如写成.card:hover而不是:hover）
如何避免Hover时布局抖动
Card 上浮后如果父容器没预留空间，周围元素会跟着跳——尤其在 .row + .col 布局里特别明显。根本原因是 transform 不触发重排，但 box-shadow 扩展区域仍占文档流空间。
- 给 Card 父容器（比如
.col）加overflow: hidden，裁掉溢出阴影，防止影响邻近元素 - 或统一给所有 Card 设
margin-bottom: 1rem，留出 hover 上浮所需的空隙 - 若用
position: relative+z-index提升层级，确保 shadow 不被兄弟元素遮挡
兼容旧版Bootstrap（v4.x）要注意什么
v4 默认 Card 没 transition，且部分主题（如 bg-dark）的 text color 会和 hover 阴影冲突，导致文字发虚。
- v4 需手动补全
transition：加到.card规则里，不能只写 hover 状态 - 深色背景 Card 建议改
box-shadow的 alpha 值（比如rgba(0,0,0,.3)），否则阴影看不清 - v4 的
.card-deck已废弃，改用.row+.col，否则 hover 时卡片间距会异常塌陷
要不要用JavaScript监听hover事件
完全没必要。纯 CSS 就能搞定，JS 只会增加复杂度、破坏可访问性（键盘 focus 时没效果），还可能和 Bootstrap 的 card-columns 冲突。
- 如果需要动态控制（比如根据用户偏好开关效果），用
data-*属性 + CSS 属性选择器更轻量 - 真要用 JS，也只该用于添加/移除 class（如
.card-hover-enabled），而非直接操作style - 注意移动端没有 hover，iOS Safari 对
:hover支持有限，别依赖它做核心交互
实际项目里最容易漏的是 overflow: hidden 这一步——看着效果漂亮，上线后 Grid 布局一 hover 就挤变形，得回头补。
