Bootstrap 5 中 border 与 shadow 工具类可安全叠加使用，但需确保图片设为 display: block（如用 img-fluid）且父容器无 overflow: hidden，否则阴影会被裁剪。
Bootstrap 5 默认不提供 border + shadow 组合类，必须手动叠加或自定义
Bootstrap 5 的 border 工具类（如 border、border-1）和 shadow 工具类（如 shadow-sm、shadow）是独立生效的，但可以安全叠加使用——前提是图片本身没有 display: block 缺失导致阴影被裁剪。常见错误是加了 shadow 却看不到效果，本质是图片作为内联元素默认带底部空白（baseline 对齐残留），挤压了阴影渲染空间。
- 确保图片有
class="img-fluid"或显式设display: block - 避免在父容器上设
overflow: hidden（会直接剪掉阴影） -
shadow类依赖box-shadow，不依赖border，两者无样式冲突，可自由组合
正确叠加 border 和 shadow 类的写法示例
以下写法在 Bootstrap 5.3+ 中完全有效，且语义清晰：
<img src="photo.jpg" class="img-fluid border border-primary border-2 shadow-sm">
说明：
-
border启用边框（默认灰色、1px），border-primary改颜色，border-2加粗到 2px（Bootstrap 边框宽度为 1–5） -
shadow-sm是最轻阴影（0 0.125rem 0.25rem rgba(0,0,0,.075)），适合图片；shadow更重，shadow-lg易显浮夸 - 顺序无关紧要，但建议把
border相关类放前面，便于快速识别样式意图
为什么有时加了 shadow 却没阴影？三个高频原因
不是类没生效，而是被布局或继承样式压制了：
立即学习“前端免费学习笔记（深入）”；
- 图片未设
display: block→ 行内元素默认对齐 baseline，下方留白被当作“内容区域”，box-shadow渲染在该区域外，视觉上消失；加d-block或img-fluid可解 - 父容器有
padding不足或margin负值 → 阴影超出父盒模型边界后被裁剪；检查父级是否设了overflow: hidden或紧凑 padding - 使用了
rounded-circle等圆角类但没配overflow: hidden→ 圆角只裁剪内容，不裁剪box-shadow，导致阴影“溢出”成椭圆；此时需额外加overflow-hidden（Bootstrap 5.3+ 已内置该类）
想微调阴影偏移或颜色？别改源码，用内联 style 覆盖更稳妥
Bootstrap 的 shadow 类是固定值，无法通过工具类调整 X/Y 偏移或模糊半径。若需定制，直接用 style 覆盖比扩展 SCSS 更快：
<img src="photo.jpg" class="img-fluid border border-dark shadow-sm" style="box-shadow: 0 4px 12px rgba(0,0,0,.15);">
注意点：
- 内联
style优先级高于工具类，能可靠覆盖 - 不要删掉
shadow-sm—— 它同时设置了box-shadow和filter: drop-shadow()（仅部分版本），保留可保兼容性 - 若用
filter: drop-shadow()替代，要注意它不支持inset，且对圆角裁剪行为与box-shadow不同
overflow 和图片的 display 值，比反复试 class 组合快得多。 
