bootstrap怎么给图片添加阴影和悬浮效果-Bootstrap教程-PHP中文网

最稳方案是用 box-shadow + :hover 自定义类（如 img-hover-shadow），而非 Bootstrap 静态 shadow 类；需处理 display、overflow、暗色模式及移动端 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 更具体

两者都能出阴影，但行为完全不同：前者是滤镜，作用于图像内容本身；后者是盒模型投影，受 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 更稳妥

不是代码没写对，往往是上下文环境干扰了效果。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

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() 动态算阴影色，但目前兼容性有限，现阶段手写两套更实在