最稳方案是用 box-shadow + :hover 自定义类（如 img-hover-shadow），而非 Bootstrap 静态 shadow 类；需处理 display、overflow、暗色模式及移动端 hover 兼容性问题。
直接用 box-shadow + :hover 最稳
bootstrap 的 shadow 类（比如 shadow-sm、shadow）本身是静态的，不会响应悬停——它只是给元素加了一次性 box-shadow 值。想让阴影“只在鼠标移上去才出现”，必须自己写 :hover 规则，不能只靠工具类堆砌。
- 推荐给图片加一个语义化类，比如
img-hover-shadow，然后在 CSS 里统一控制：.img-hover-shadow:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } - 值建议复用 Bootstrap 5 默认的
shadow强度（即上面示例），保持视觉一致，避免自己乱调数值导致违和 - 别用
!important硬顶，优先靠选择器权重解决覆盖问题，比如写成img.img-hover-shadow:hover比单纯.img-hover-shadow:hover更具体
filter: drop-shadow() 和 box-shadow 选哪个？
两者都能出阴影，但行为完全不同：前者是滤镜，作用于图像内容本身；后者是盒模型投影，受 border-radius、overflow: hidden 影响明显。
- 如果图片是圆角（比如
rounded类），又套在.card里，box-shadow会跟着圆角走，但可能被父容器裁掉——这时drop-shadow()更自然，它能贴合图片实际轮廓 -
drop-shadow(0 0.25rem 0.5rem rgba(0,0,0,0.2))写法更轻量，且支持 SVG 图片，但不支持inset，也不能像box-shadow那样叠多层 - 移动端要注意：
filter在部分旧版 iOS Safari 上有性能抖动，简单悬停用box-shadow更稳妥
常见踩坑：阴影没出来、错位、或只在桌面生效
不是代码没写对，往往是上下文环境干扰了效果。
-
img默认是display: inline，底部会有空白间隙，导致阴影看起来“飘”在半空——加一句display: block或vertical-align: top就解决 - 父容器设了
overflow: hidden（比如.card或自定义卡片），阴影会被直接切掉；要么改父容器，要么用clip-path: none覆盖（慎用） - 在触屏设备上，
:hover只在模拟指针时触发，真机点一下就消失；如需兼容，得加媒体查询：@media (hover: hover) { .img-hover-shadow:hover { box-shadow: ...; } }
暗色模式下阴影发灰？得手动适配
Bootstrap 本身不自动调整 box-shadow 的颜色透明度，纯黑阴影在深色背景上会糊成一团。
- 用
@media (prefers-color-scheme: dark)单独重写悬停阴影，把rgba(0,0,0,0.15)改成更高透明度（比如0.3）或换浅灰基色 - 别指望
color-mode工具类自动生效——那些只管文字和背景色，不管box-shadow - 如果项目用了 CSS 自定义属性（
--bs-body-bg等），可以配合color-mix()动态算阴影色，但目前兼容性有限，现阶段手写两套更实在
overflow、border-radius、display 交互起来特别容易漏掉一环。最省心的做法，是把悬停阴影当成一个独立视觉模块来写，而不是零散拼凑工具类。 
