bootstrap 5卡片悬停阴影不生效需同时设置transition和box-shadow，检查overflow隐藏、z-index遮挡、移动端:hover失效及阴影颜色适配问题。
Bootstrap 5 卡片悬停阴影不生效？检查 transition 和 box-shadow 是否同时设置
直接加 box-shadow 在 :hover 里，但没动画感、甚至完全没反应——大概率是缺了过渡声明。Bootstrap 5 的卡片默认没有 transition，所以阴影变化是“跳变”或被浏览器忽略（尤其旧版 Safari）。
- 必须显式给卡片容器加
transition: box-shadow 0.2s ease-in-out，不能只靠:hover里的box-shadow - Bootstrap 5 默认用
.card类，建议在自定义 CSS 中覆盖，不要改源码 - 别用
!important强行覆盖，优先提高选择器权重，比如写成.card:hover而非单纯:hover
阴影层级太浅或被遮挡？注意 z-index 和父容器 overflow
加了 box-shadow 后阴影“被砍掉一半”，或者悬停时阴影突然消失——常见于卡片放在 .row 或带 overflow: hidden 的容器里，也可能是兄弟元素 z-index 更高，把阴影盖住了。
- 给卡片加
position: relative和z-index: 1（或更高），确保它浮在同级元素之上 - 检查父容器是否设置了
overflow: hidden，特别是.container-fluid或自定义 wrapper，删掉或改成overflow: visible - 阴影本身不占布局空间，但会被有
overflow的祖先裁剪，这点容易忽略
移动端悬停无效？别依赖 :hover 做核心交互
在 iOS Safari 或 Android Chrome 上，:hover 只在模拟鼠标时偶尔触发，真机点一下就没了——这不是 bug，是规范行为。如果设计上要求“点击即显阴影”，不能只靠 CSS :hover。
- 移动端应配合 JS 切换类名，比如监听
touchstart添加is-hovered类，再用.card.is-hovered { box-shadow: ... } - 或者统一用
:focus-within+tabindex="0"让卡片可聚焦，兼顾键盘与触摸 - 别试图用
@media (hover: hover)来区分，iOS Safari 对该媒体查询支持不稳定
阴影颜色发灰、不自然？避开 Bootstrap 默认 rgba(0,0,0,0.2) 硬编码
直接套用 Bootstrap 官方阴影值 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)，结果在浅色背景上像蒙了层灰——因为 rgba(0,0,0,0.15) 缺乏层次，且没适配深色模式。
- 推荐用两层阴影叠加：
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075), 0 0.25rem 0.375rem rgba(0, 0, 0, 0.05)，更柔和 - 深色模式下可用
@media (prefers-color-scheme: dark)改为rgba(255,255,255,0.08)等浅色偏移 - 避免用
box-shadow: 0 0 0 0.2rem #007bff这种“描边式”阴影，视觉上像选中态，不是悬停反馈
真正难的不是加阴影，而是让阴影在不同设备、主题、嵌套结构里都稳定出现——尤其是 overflow 和 z-index 的组合，一不留神就白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
