Bootstrap 官方无 shadow-hover 类，需手动结合 shadow 工具类与 :hover 伪类实现悬停阴影，推荐定义语义化类如 .img-hover-shadow 并在 CSS 中设置 hover 状态的 box-shadow。
直接用 Bootstrap 的 shadow-hover 类？不存在
Bootstrap（包括 v5 和 v6）**没有内置 shadow-hover 这个类名**。你搜到的可能是社区自定义的扩展、旧版第三方插件，或是误记了类名。官方只提供静态阴影类，比如 shadow、shadow-sm、shadow-lg，它们默认就生效，不响应 hover。
正确做法：组合 shadow + :hover 伪类
要让图片悬停时才显示阴影，必须手动写 CSS 规则，把 Bootstrap 的阴影工具类和 :hover 结合起来。关键是：先给图片加基础类（如 shadow-none），再用自定义样式覆盖 hover 状态。
- Bootstrap 的阴影类本质是设置
box-shadow，所以你可以直接复用它的值 - 推荐在
或独立 CSS 文件中添加，避免内联样式 - 选择器要足够具体，防止被其他样式覆盖（比如加
img标签限定）
.card-img-top:hover,
.img-thumbnail:hover,
img.shadow-on-hover:hover {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
上面的 box-shadow 值正是 Bootstrap 5 中 shadow 类使用的默认值，保持视觉一致。
如果用的是 Bootstrap 5.3+，可用 shadow-sm/shadow-lg 配合媒体查询写法
新版 Bootstrap 支持响应式阴影类（如 shadow-sm-md），但 hover 仍需手写。更稳妥的方式是定义语义化类，便于复用：
立即学习“前端免费学习笔记（深入）”；
- 给图片加一个自定义类，比如
img-hover-shadow - 在 CSS 中统一控制：
.img-hover-shadow:hover应用对应强度的box-shadow - 若需兼容暗色模式，可配合
@media (prefers-color-scheme: dark)调整颜色透明度
.img-hover-shadow:hover {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
.img-hover-shadow:hover {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
}
}
常见踩坑点
实际写的时候容易忽略这几处：
-
img元素默认是 inline，若没设display: block或vertical-align: top，阴影可能错位或底部留白 - 用了
!important却忘记父容器有overflow: hidden，导致阴影被裁切 - 在 Card 组件里给
.card-img-top加 hover，结果发现 Card 本身有border-radius，阴影圆角不匹配——此时应同步调整border-radius或用clip-path - 移动端 touch 设备上 hover 不触发，需额外加
@media (hover: hover)媒体查询做隔离
阴影效果看似简单，但和图片尺寸、容器边界、渲染层级、设备交互模式都有关联，调的时候别只盯着 box-shadow 参数。
