直接修改 --bs-box-shadow 等 css 自定义变量最省事，bootstrap 5.3+ 已将阴影抽为 :root 变量，重定义 --bs-box-shadow-sm、--bs-box-shadow、--bs-box-shadow-lg 即可全局生效，无需改动 sass 或重复 class。
直接改 --bs-box-shadow 等 CSS 自定义变量最省事
Bootstrap 5.3+ 把阴影值抽成了 CSS 变量，改它们就能全局生效，不用碰 Sass、也不用写一堆重复 class。改完后所有用 shadow、shadow-sm 的地方自动更新，包括 .card、.navbar、.btn 等组件。
要改的变量就三个：
-
--bs-box-shadow-sm：对应shadow-sm，默认是0 .125rem .25rem rgba(0, 0, 0, .075) -
--bs-box-shadow：对应shadow，默认是0 .5rem 1rem rgba(0, 0, 0, .15) -
--bs-box-shadow-lg：对应shadow-lg，默认是0 1rem 3rem rgba(0, 0, 0, .175)
改法很简单，在你的自定义 CSS 文件（或 <style></style> 块）里重定义即可：
:root {
--bs-box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
--bs-box-shadow-lg: 0 10px 24px -4px rgba(0, 0, 0, .1), 0 6px 8px -6px rgba(0, 0, 0, .05);
}
注意：:root 作用域覆盖全局；如果只希望深色模式下变浅，得配合 @media (prefers-color-scheme: dark) 或 [data-bs-theme="dark"] 单独写。
为什么不能只靠 shadow-lg 类堆出“深度感”
很多人试过给同一个元素连加 shadow-lg shadow-lg，结果没用——CSS 不支持多个同名工具类叠加生效，后写的会完全覆盖前写的。所谓“深度感”，本质是多层阴影叠加（比如外扩 + 内收）、不同模糊半径组合、或带方向偏移（如只向下投），这些都超出了单个 box-shadow 值的能力范围。
真正可用的实操路径只有两个：
- 写一个新 class，里面用完整的
box-shadow值，支持逗号分隔的多层写法（例如0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.08)） - 在 Sass 项目中扩写
$box-shadowmap 并调用@include generate-shadow-utilities()，生成语义化新类（如shadow-deep）
别指望 Bootstrap 自己解析多层值——它的工具类体系天生是单值映射。
深色模式下阴影发灰？不是 bug，是 rgba 值没适配
默认的 rgba(0,0,0,.15) 在深色背景上对比度太低，看起来像糊了一团灰，不是阴影失效。Bootstrap 不会自动把黑转白、也不调整透明度，必须手动干预。
推荐写法是解耦颜色和透明度，用 CSS 变量控制：
.shadow-depth {
box-shadow: 0 4px 12px var(--bs-shadow-color, rgba(0, 0, 0, .1));
}
@media (prefers-color-scheme: dark) {
.shadow-depth {
--bs-shadow-color: rgba(255, 255, 255, .06);
}
}
[data-bs-theme="dark"] .shadow-depth {
--bs-shadow-color: rgba(255, 255, 255, .06);
}
这样既兼容系统级暗色模式，也兼容 Bootstrap 手动切换的 data-bs-theme="dark"。iOS Safari 对 rgba(..., .05) 渲染偏保守，.06 是更稳妥的下限。
修改变量后，按钮组/卡片组阴影仍被裁剪？那是 overflow 没放开
改了 --bs-box-shadow，但 .btn-group 或 .card-group 里还是看不到阴影——大概率是父容器的 overflow: hidden 在作怪。Bootstrap 的这两个组件默认都设了 overflow: hidden，专门用来切掉子元素溢出部分，而阴影正是画在元素边界之外的。
解决方法不是调阴影值，而是换容器或松开限制：
- 按钮组：别套
.btn-group，改用<div class="d-flex p-2"><div class="btn-group"></div></div>，外层加p-2提供留白，且不设overflow - 卡片组：直接弃用
.card-group，改用.row > .col > .card.shadow，Flex 布局天然支持阴影溢出 - 非要保留原结构：在外层加
style="overflow: visible"或自定义 class 覆盖overflow
记住：阴影是“画在外面”的，它永远依赖父容器的包容性，而不是你调得多精细。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
