Bootstrap 5 的 shadow 类通过 shadow-0 至 shadow-5、shadow-sm、shadow-lg 和默认 shadow（=shadow-2）控制 box-shadow 强度，仅对块级或 inline-block 元素生效，使用固定 rgba(0,0,0,0.15) 颜色，不支持响应式变体或颜色自定义。
Bootstrap 5 的 shadow 类怎么用？
Bootstrap 5 内置了 shadow- 系列实用类，直接控制 box-shadow 强度，无需写 CSS。但它们只对块级元素生效（比如 div、card），对文字或内联元素无效——这是最常被忽略的前提。
可用值从 shadow-0（无阴影）到 shadow-5（最强），中间还有 shadow-sm 和 shadow-lg 两个语义化别名。注意：shadow（不带后缀）是默认中等阴影，等价于 shadow-2。
-
shadow-0：完全移除父级继承的阴影（适合覆盖组件默认样式） -
shadow-sm：偏移小、模糊低，适合表单控件或轻量卡片 -
shadow-lg：扩散大、颜色深，慎用于移动端，可能显得“浮得太高” - 所有 shadow 类都使用
rgba(0, 0, 0, 0.15)作为阴影色，无法通过类名修改
为什么加了 shadow 类没反应？
常见原因不是类名写错，而是元素本身不满足渲染条件：没有设置 display: block 或 display: inline-block，或者被 overflow: hidden 裁剪了阴影区域。
例如给一个 span 加 shadow-lg，默认不会显示——必须显式加 d-inline-block 或 d-block：
<span class="shadow-lg d-inline-block">有阴影的 span</span>
- 检查 computed styles，确认
box-shadow属性是否被其他 CSS 覆盖（如第三方库重置） - 卡片（
.card）默认已有shadow，叠加shadow-lg会加倍，视觉上可能过重 - 在 dark mode 下，
rgba(0,0,0,0.15)阴影对比度下降，可能显得“发灰”而非立体
如何自定义 shadow 颜色或模糊值？
Bootstrap 的 shadow 类不支持动态配置。想换颜色、改模糊半径或偏移量，必须脱离实用类，手写 CSS：
.custom-shadow {
box-shadow: 0 4px 12px rgba(106, 13, 173, 0.25);
}
- 推荐用 CSS 自定义属性（
--bs-box-shadow）配合:root统一管理，但注意 Bootstrap 5 默认未导出该变量供覆盖 - 如果只是微调，可复用 Bootstrap 的颜色系统：比如
rgba(var(--bs-primary-rgb), 0.2) - 避免在 JS 中动态拼接
box-shadow字符串，性能差且难维护；优先用 class 切换
Shadow 类在响应式场景下的表现
Bootstrap 的 shadow 类本身**没有响应式变体**（比如 shadow-md-down 这种不存在）。需要适配不同屏幕时，只能靠媒体查询或自定义断点类：
<div class="shadow-lg shadow-sm-md">桌面强阴影，中屏弱化</div>
然后补充 CSS：
@media (max-width: 768px) {
.shadow-sm-md { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
}
- 移动设备上过强的阴影会干扰内容层级，建议小屏统一降为
shadow-sm或shadow-1 - 使用
prefers-reduced-motion时，阴影虽不属动画，但部分辅助技术会忽略非必要视觉效果——这不是 bug，是可访问性预期 - SSR 渲染下，若服务端未加载 Bootstrap CSS，
shadow-类会静默失效，需确保 CSS 资源完整加载
shadow-lg 反而削弱重点。 
