Bootstrap 5 的 shadow 工具类直接添加预设 box-shadow 效果：shadow（中等）、shadow-sm（轻量）、shadow-lg（明显外扩）、shadow-none（彻底移除）；仅对有尺寸或 display 非 inline 的元素生效，需避免覆盖、溢出和深色背景失效问题。
Bootstrap 5 的 shadow 工具类怎么用
直接给元素加阴影，bootstrap 5 提供了现成的 shadow 系列工具类，不需要写 css 或引入额外样式。它本质是预设了几档 box-shadow 值，对应不同深浅和扩散程度。
常见错误是套用旧版（v4）写法，比如 shadow-sm 在 v5 里依然存在，但 shadow-lg 默认比 v4 更重；另外，shadow-none 是显式清除阴影的唯一可靠方式，别用 shadow-0——它不存在。
-
shadow：默认中等阴影（相当于0 0.5rem 1rem rgba(0,0,0,.15)） -
shadow-sm：轻量，适合卡片内边框或微浮起效果 -
shadow-lg：明显外扩，适合模态框、悬浮按钮 -
shadow-none：彻底移除，包括父级继承来的
注意：这些类只作用于块级或设置了 display: inline-block 等能接受 box-shadow 的元素；对纯 inline 元素（如 <span>）无效，得先加 d-inline-block。
为什么加了 shadow 没反应
大概率是元素没“撑开”或者被其他样式覆盖。Bootstrap 的阴影依赖 box-shadow 渲染，而该属性对无宽高、无背景、无边框的空元素不生效。
- 检查元素是否设置了
width/height，或有内容/内边距撑起尺寸 - 确认没被父容器的
overflow: hidden截断（阴影会溢出元素边界） - 排查是否被自定义 CSS 中的
box-shadow: none !important覆盖 - 在使用 Sass 自定义主题时，如果重写了
$enable-shadows为false，所有shadow-*类都会编译为空
快速验证：临时加个 bg-light border，看阴影是否随之出现——这是判断渲染条件是否满足的最简方法。
自定义阴影强度或颜色要怎么搞
Bootstrap 不提供颜色或偏移量的工具类，它的 shadow 系列全是固定值。想改颜色、角度或模糊半径，必须自己写 CSS。
- 推荐方式：新增一个工具类，比如
shadow-purple，在自定义 CSS 中定义box-shadow: 0 0.5rem 1rem rgba(106, 76, 147, .3) - 避免直接覆盖
.shadow，否则会影响全局组件（如.card） - 若用 Sass，可调用
box-shadow()函数复用 Bootstrap 的 shadow map，例如：@include box-shadow($shadow-md) - 性能提示：过度使用大范围模糊阴影（如
blur: 2rem）可能触发页面重绘变慢，尤其在低端移动设备上
别试图用多个 shadow- 类叠加——CSS 不支持多层工具类自动合并，后写的会完全覆盖前写的。
和 Card 组件的阴影冲突怎么办
.card 默认自带 box-shadow（通过 .card 类内置），如果你再给它加 shadow-lg，结果不是“更强”，而是后者完全替代前者，可能破坏设计一致性。
- Card 的默认阴影来自
.card规则，不是工具类，所以shadow-none可以关掉它 - 想微调 Card 阴影，优先修改
$card-box-shadowSass 变量，而不是硬套工具类 - 如果只是临时需要不同阴影，用
class="card shadow-sm"是安全的，因为 Bootstrap 的.card样式权重低于工具类（后者 specificity 更高） - 注意：某些 Bootstrap 衍生主题（如 AdminLTE）会重置
.card阴影，此时工具类可能失效，得查实际生成的 CSS 规则
真正容易被忽略的是：阴影的视觉效果高度依赖背景色对比。在深色背景上用默认 shadow，几乎看不见——这时候不是类没生效，是 rgba 里的黑色透明度不够适配。
