Bootstrap 4/5 提供 shadow-sm、shadow、shadow-lg 和 shadow-none 四类阴影工具类，但需确保 $enable-shadows 为 true；hover 阴影需手动写 CSS；card-group 会裁剪阴影，应改用 row+col 或 card-deck/Flex；自定义深度须修改 Sass 变量或 CSS 自定义属性。
Bootstrap 4/5 中直接用 shadow-* 类就能加阴影
bootstrap 4 起内置了开箱即用的阴影工具类，不需要写 css、也不用改 sass 变量——只要你的项目启用了阴影（默认是启用的），直接加类就行。核心类名有：shadow-sm、shadow、shadow-lg，还有 shadow-none 用于清除。
常见错误现象：卡片没阴影，但代码里写了 shadow —— 很可能是你用的是 Bootstrap 4 早期版本（如 4.0.0），那时 $enable-shadows 默认为 false；或者你用了自定义编译，手动关掉了它。
-
shadow-sm：适合轻量卡片，比如仪表盘小数据卡 -
shadow（无后缀）：中等深度，最常用，对应box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) -
shadow-lg：适合模态框、高亮主卡，但移动端慎用——太重会削弱内容焦点 - Bootstrap 5 不再支持
shadow-2dp这类 Material Design 风格命名（那是 TODC Bootstrap 的扩展）
hover 时动态加阴影必须自己写 CSS
Bootstrap 官方不提供 shadow-hover 这类工具类。想实现“鼠标移上才显影”，得补一行 CSS，否则只靠 shadow-sm 是静态常驻的。
使用场景：后台菜单卡片、产品展示页、交互式仪表板——用户需要视觉反馈确认可点击区域。
实操建议：复用 Bootstrap 原生阴影值，避免风格割裂：
card:hover {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
注意点：
- 别漏掉
!important（除非你用的是 Bootstrap 5.3+ 并启用了utilities的 hover 变体） - 别用
transition硬套所有属性，只过渡box-shadow更稳：transition: box-shadow .2s ease; - 在深色背景上，
rgba(0,0,0,.15)可能不够明显，可微调 alpha 值或换hsla()
卡片组（card-group）会覆盖单个卡片的阴影
这是最容易踩的坑：你给每个 .card 都加了 shadow-lg，结果渲染出来只有外框一圈有影子——因为 .card-group 内部用 overflow: hidden 切掉了内部卡片的阴影溢出部分。
原因很简单：card-group 的设计目标是让卡片“无缝拼接”，不是突出单个卡片。
- 要保留阴影，就别用
card-group，改用.row + .col布局 - 如果必须用
card-group又想要阴影，只能放弃它，改用.card-deck（Bootstrap 4）或直接用 Flex（Bootstrap 5 推荐） - TODC Bootstrap 的
shadow-2dp是写死在_card.scss里的，不走工具类体系，和card-group同样冲突
自定义阴影深度需改 Sass 变量（仅限源码编译）
如果你的 UI 设计稿要求阴影偏淡（比如 0 2px 4px rgba(0,0,0,.08)），而 Bootstrap 默认的 shadow 太重，就不能靠工具类硬凑，得动变量。
关键变量是 $box-shadow-sm、$box-shadow、$box-shadow-lg，位于 _variables.scss。修改后需重新编译 CSS。
- CDN 引入的 min.css 文件无法动态改这些值
- Bootstrap 5.3+ 支持通过 CSS 自定义属性（
--bs-box-shadow）覆盖，但仅限根级容器，对工具类无效 - 别试图用
!important覆盖所有shadow-*类——维护成本高，且易和 focus 状态阴影打架
真正麻烦的不是加阴影，而是阴影在不同上下文中的表现一致性：卡片在 modal 里、在 dark mode 下、被 transform: scale(.95) 缩放时，阴影的视觉权重都会偏移。这时候光靠工具类不够，得结合具体容器做微调。
