shadow-lg 对应的 box-shadow 值是 0 1rem 3rem rgba(0, 0, 0, 0.175)（即 0 16px 48px），由 Sass 变量 $box-shadow-lg 控制，比 shadow 更重，适用于模态框或主视觉卡片。
shadow-lg 对应的 box-shadow 值是多少
shadow-lg 在 Bootstrap 5 中默认生成的 box-shadow 是：0 1rem 3rem rgba(0, 0, 0, 0.175)（即 0 16px 48px）。这个值由 Sass 变量 $box-shadow-lg 控制，编译后固化为 CSS 工具类。它比 shadow（0 .5rem 1rem rgba(0,0,0,.15)）更重，适合模态框或主视觉卡片，但不建议在移动端大面积使用——阴影过深会抢内容焦点，且在高 DPI 屏上可能显得糊。
直接覆盖 shadow-lg 类的 CSS 是否可行
可行，但不推荐优先采用。因为：
- Bootstrap 的工具类是原子化的，
.shadow-lg被多个组件（如.modal、.dropdown-menu）隐式依赖，全局改写会影响一致性 - 若只改某几个卡片，应在具体元素上加自定义类，再用
!important覆盖：.my-card.shadow-lg { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; } - 若用 CSS 变量方式（如
--bs-box-shadow-lg），需确认你用的是 Bootstrap 5.3.0+，且该变量已注入到 :root；旧版不支持此变量，强行设置无效
真正可控的修改方式：重编译 Sass
要一劳永逸地调整 shadow-lg 深度，必须从源变量入手。步骤如下：
- 在自定义 Sass 文件中，于
@import "bootstrap/scss/functions";后、@import "bootstrap/scss/variables";前，重定义：$box-shadow-lg: 0 .75rem 2.25rem rgba(0, 0, 0, 0.14);
- 确保你的构建流程能识别并编译该文件（如 Webpack + sass-loader，或 VS Code + Live Sass Compiler）
- 注意：不要在
variables.scss原文件里改——下次升级 Bootstrap 会被覆盖 - 如果项目用了 CSS 自定义属性主题（如深色模式），还需同步更新
--bs-box-shadow-lg的对应值，否则切换主题时阴影不变
为什么加了 shadow-lg 还没效果
常见失效原因不是深度问题，而是布局容器裁剪了阴影：
-
.card-group默认设了overflow: hidden，会把shadow-lg的扩散部分直接切掉——换用.row > .col > .card或.card-deck - 父元素用了
transform（比如.translate-middle）、filter或will-change，可能触发新的层叠上下文，导致阴影被截断 - 你用的是自定义构建的 Bootstrap CSS，且编译时把
$enable-shadows设为了false——检查最终 CSS 文件里是否真有.shadow-lg规则
真正改深度时，别只盯着数值大小；阴影的「可信度」更多取决于模糊半径与偏移量的比例，以及背景对比度。一个被忽略的细节是：深色背景上 rgba(0,0,0,.175) 几乎看不见，此时调低透明度不如换用 rgba(255,255,255,.08) 更有效。
