Bootstrap的shadow-*类提供预设层级阴影效果，含固定偏移、模糊与颜色值，作用于元素自身且不继承；shadow为中等强度，默认用于卡片等容器；body上使用会因高度限制导致滚动时阴影“消失”。
Bootstrap 的 shadow-* 类到底加了什么效果
Bootstrap 的阴影类不是简单套个 box-shadow，而是预设了一套有层级感的视觉深度系统——比如 shadow-sm 是轻量浮起，shadow-lg 是明显悬浮，shadow-none 则彻底关闭。它背后是固定组合的偏移、模糊和颜色值，不是动态计算，所以渲染快、兼容稳。
- 所有阴影类都作用于元素自身，不继承、不传播，也不会影响子元素定位
-
shadow（无后缀）是中等强度，默认值，适合卡片、模态框主体等需要基础立体感的容器 - 移动端小屏下，过重的阴影（如
shadow-lg）可能削弱文字可读性，尤其在浅色背景上 - 不要对
body或html直接用阴影类——滚动时会截断，见下一条
为什么给 body 加 shadow 类会导致滚动时阴影“消失”
因为 body 在 CSS 布局中默认高度只撑到视口（viewport）高度，不是整个文档高度。当你加了 shadow 类，阴影只渲染在这一截“可视区域”的边界上；一滚动，内容就滑出阴影范围，看起来像断掉了。
- 真正该加阴影的是承载全部内容的语义容器，比如
<main>或带class="container"的外层<div> - 如果必须全局加内阴影（如暗色边缘氛围），改用
html的inset阴影 +min-height: 100vh更可靠 - 检查是否意外设置了
overflow: hidden在父容器上——这也会裁剪阴影
如何让按钮在“被选中”时显示阴影（而不是点击瞬间）
Bootstrap 5.3 起默认禁用了 .btn:active 和 .btn:focus 的阴影，因为它们只反映瞬时状态，无法表达“已选中”。真要高亮选中项（比如 radio 按钮组），必须基于 :checked 状态做样式传导。
- 结构必须是：
<input type="radio" class="btn-check" id="opt1"><label class="btn btn-outline-primary" for="opt1">选项</label> - 关键选择器是：
input[type="radio"]:checked + label.btn，用+确保只匹配紧邻的 label - 推荐加
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25)，复用 Bootstrap 主色透明度，和原生 focus 样式一致 - 别忘了加
position: relative和z-index: 2，否则阴影可能被兄弟元素遮住
自定义 hover 阴影时最容易漏掉的一件事
Bootstrap 自带的 shadow-* 类没有 hover 版本，你得自己写。但很多人只写了 :hover { box-shadow: ... }，却忘了还原默认状态——导致鼠标移开后阴影还挂着。
- 必须显式声明非 hover 状态：
.my-card { box-shadow: var(--bs-shadow-sm); } .my-card:hover { box-shadow: var(--bs-shadow-lg); } - 更稳妥的做法是用 CSS 变量统一管理：
--bs-shadow-hover: var(--bs-shadow-lg)，方便后续主题切换 - 如果用 SCSS，别直接复制
$shadow-sm值——它可能是函数生成的，应引用map-get($shadows, sm)保证一致性
shadow-lg，辅助按钮用 shadow-sm，禁用状态用 shadow-none，这种差异比单纯加阴影更能引导用户视线。 
