shadow-sm和shadow-lg是bootstrap 5中真正用于视觉分层的两个核心阴影类：shadow-sm适用于微浮起场景（如指标卡、表单聚焦态），shadow-lg用于强悬浮感（如模态框），二者需配合ui深度系统统一使用。
shadow-sm 和 shadow-lg 是 Bootstrap 5 中仅有的两个“有实际区分度”的阴影工具类，shadow（无后缀）只是中等强度默认值，shadow-none 仅用于清除；真正在项目里做视觉分层时，基本就靠这两个档位撑住。
shadow-sm 适合什么场景
它对应的是 0 .125rem .25rem rgba(0,0,0,.075)，偏移小、模糊轻、透明度低——本质是“微浮起”，不是为了造立体感，而是暗示“这个区域略高于背景”。
- 仪表盘里的小卡片（如单个指标卡、状态徽章容器）
- 表单输入框聚焦态的辅助提示（配合
focus状态使用） - 深色背景上的按钮或标签，避免阴影吃掉文字对比度
- 别用在
overflow: hidden的父容器里，阴影会被裁掉
shadow-lg 容易被高估的适用范围
它的值是 0 1rem 3rem rgba(0,0,0,.175)，模糊半径大、透明度更高，视觉上“外扩感”强。但这也意味着：
- 在浅色背景 + 小字体组合下，文字边缘可能被阴影轻微“晕染”，可读性下降
- iOS Safari 或低端 Android 设备上，重绘开销明显，滚动时偶有卡顿
- 和
z-index: 1050以上的模态框（如.modal）搭配时，若阴影太重，反而削弱层级主次 - 它不等于“更高级”，只是更重——如果你需要的是“悬浮感”，
shadow往往比shadow-lg更稳
为什么 shadow-sm 和 shadow-lg 经常失效
不是代码写错，大概率是这三类问题：
- 元素没有显式尺寸：比如
<div></div>是空块，高度为 0，阴影自然不可见；加min-height: 1px或内容/内边距即可 - 父级设置了
overflow: hidden，尤其常见于轮播图容器、卡片网格的 wrapper 层 - CSS 优先级被覆盖：比如你写了
.card { box-shadow: none !important; }，那再加shadow-sm也白搭
想微调但又不想写新 class？试试 CSS 变量
Bootstrap 5.3+ 支持通过自定义属性覆盖默认值，不影响其他组件，也不用动构建流程：
body {
--bs-box-shadow-sm: 0 .125rem .375rem rgba(0, 0, 0, .09);
--bs-box-shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, .15);
}
注意：改了变量后，所有用到 shadow-sm 和 shadow-lg 的地方都会同步更新，包括第三方基于 Bootstrap 的组件库——这点比手写 class 更彻底，但也更需谨慎。
真正难的不是选哪个类，而是意识到：这两档阴影不是“够用就行”，而是整个 UI 深度系统的锚点。一旦你在某个卡片上用了 shadow-lg，那所有同级操作入口（按钮、切换开关、标签）的阴影强度就得对齐，否则用户感知到的不是“层级”，而是“不一致”。
