bootstrap 5+ 的 shadow- 类通过预设 class 控制 box-shadow 强度，仅对块级元素生效，支持 shadow、shadow-sm、shadow-lg、shadow-none 四档，不支持响应式或自定义数值，需确保元素有尺寸且未被 overflow: hidden 裁剪。
Bootstrap 的 shadow- 类名怎么用
Bootstrap 5+ 内置的阴影工具类（shadow-）直接通过 class 控制 box-shadow 强度，不需写 CSS。它只作用于块级元素（如 div、card），对内联元素（span、a）无效——因为默认没有 display: block 和 box-sizing: border-box，阴影压根不会渲染。
可用值有：shadow（基础）、shadow-sm（浅）、shadow-lg（深）、shadow-none（清除）。注意：没有 shadow-md 或自定义数值变体，这是 Bootstrap 故意精简的设计。
-
shadow对应box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) -
shadow-sm更细更淡，适合表单控件或轻量卡片 -
shadow-lg比默认强约 2 倍，常用于模态框（modal）或悬浮按钮 - 响应式写法不支持，比如
shadow-sm-md是无效 class
为什么加了 shadow- 类却没效果
最常见原因是元素没「占位」：阴影是 box-shadow，依赖元素自身的盒模型。如果目标元素是空的、高度为 0、或者被 position: absolute 拉出文档流且未设宽高，阴影就不可见。
另一个高频问题是父容器设置了 overflow: hidden（比如 card 默认有 border-radius + overflow: hidden），导致阴影被裁掉。这时得去掉 overflow: hidden，或改用 card 的 border-0 + 手动加 shadow-。
- 检查元素是否渲染出实际尺寸（加
bg-primary或min-height: 2rem快速验证） - 审查元素 computed styles，确认
box-shadow是否被覆盖（比如自定义 CSS 里写了box-shadow: none !important） - 避免在
table单元格（td）上直接用——td默认display: table-cell，部分浏览器对它的 box-shadow 支持不稳定
和 card 组件一起用要注意什么
card 默认自带轻微阴影（shadow-sm），但这个阴影来自其内部 .card 规则，不是靠工具类。如果你手动加 shadow-lg 到 .card 元素上，会覆盖默认样式——这没问题，但得知道它是「叠加替换」而非「增强」。
更麻烦的是 card-header 和 card-footer：它们本身不继承 card 的阴影，加 shadow- 类后会出现「双阴影」错觉（一个来自 card 容器，一个来自 header 自身），视觉割裂。
- 统一控制阴影，建议只在最外层
.card上设置，不要分散到子元素 - 要取消 card 默认阴影？用
shadow-none替代原生shadow-sm，别只删 class 留空 -
card-img-top不支持阴影工具类——图片是img标签，默认 inline，必须加d-block才能生效
自定义阴影强度只能靠 CSS 吗
是的。shadow- 工具类是固定几档，没法微调模糊半径或偏移量。想实现 shadow-2xl 或内阴影（inset），必须手写 CSS：
.shadow-2xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
但注意：这类自定义类名不会自动响应暗色模式（prefers-color-scheme: dark），而 Bootstrap 原生 shadow- 类在 v5.3+ 中已适配系统主题切换（颜色值随 color-mode 动态变化）。
真正容易被忽略的点是：阴影颜色取自 rgba(var(--bs-body-color-rgb), 0.15) 这类 CSS 变量，所以改 --bs-body-color-rgb 会影响所有 shadow- 的透明度表现——这不是 bug，是设计使然。
