Bootstrap 5 内置阴影工具类不足时，应优先修改 CSS 自定义属性或新增语义化 class；深色模式需配合 prefers-color-scheme 或 data-bs-theme 手动调整 --bs-shadow-color；Sass 项目可扩写 $box-shadow map 并调用 generate-shadow-utilities。

Bootstrap 5 的 box-shadow 工具类不够用怎么办

Bootstrap 5 内置的 shadow-sm、shadow、shadow-lg 和 shadow-none 只覆盖极简的几档阴影，实际项目里经常需要更细的控制（比如 z-index 匹配、深色模式适配、或特定偏移/模糊值）。直接覆盖 Bootstrap 的 CSS 变量或新增 class 是最稳妥的做法，而不是靠 !important 覆盖样式。

• 优先修改 CSS 自定义属性：--bs-box-shadow-sm、--bs-box-shadow、--bs-box-shadow-lg，这样所有用到这些工具类的元素会自动更新
• 若只需局部生效，定义新 class（如 shadow-xs 或 shadow-card-heavy），并在其中写完整 box-shadow 值，避免污染全局
• 注意：Bootstrap 5.3+ 开始支持深色模式下自动切换 box-shadow 颜色（基于 color-mode），自定义时需同步处理 @media (prefers-color-scheme: dark) 块

如何让自定义阴影在深色模式下自动变浅

默认的 box-shadow 在深色背景上容易糊成一片，尤其当使用 rgba(0, 0, 0, 0.2) 这类值时。Bootstrap 本身不自动调整阴影颜色，必须手动干预。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 不要硬编码 rgba(0,0,0,0.2) —— 改用 var(--bs-black) 或 var(--bs-gray-800) 等语义化变量，再配合 color-mode 切换
• 推荐写法：

  .shadow-card-dark-friendly {
    box-shadow: 0 4px 12px var(--bs-shadow-color, rgba(0, 0, 0, 0.1));
  }
  @media (prefers-color-scheme: dark) {
    .shadow-card-dark-friendly {
      --bs-shadow-color: rgba(255, 255, 255, 0.08);
    }
  }

• 如果用了 Bootstrap 的 data-bs-theme="dark" 手动切换模式，还需额外加 [data-bs-theme="dark"] .shadow-card-dark-friendly 规则

用 Sass 自定义 shadow 工具类（适合长期维护项目）

如果你的项目用 Sass 编译 Bootstrap，直接扩展现有工具系统比零散写 CSS 更可持续。

• 在引入 Bootstrap 后，重定义 $box-shadow map：

  $box-shadow: (
    xs: 0 .125rem .25rem rgba(0, 0, 0, .075),
    card-heavy: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05),
  );

• 然后调用 @include generate-shadow-utilities($box-shadow)（Bootstrap 5.3+ 提供该 mixin）
• 注意：旧版 Bootstrap（generate-shadow-utilities，得手写 @each 循环生成 class，且要避开与内置 shadow- 命名冲突

为什么给按钮加 shadow-hover 效果后点击没反馈

很多人想实现「悬停加深阴影 + 点击压下去」效果，但直接用 :hover 和 :active 加 box-shadow 容易失效，尤其是按钮带 border-radius 或用了 transform: scale()。

• 根本原因：浏览器对 box-shadow 的动画支持较弱，且 :active 状态持续时间极短（约 100ms），肉眼难察觉变化
• 正确做法是结合 transform 和 transition：

  .btn-shadow-lift {
    transition: box-shadow .15s ease, transform .1s ease;
  }
  .btn-shadow-lift:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  }
  .btn-shadow-lift:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  }

• 别忘了给 transition 显式声明属性，否则所有可动画属性都会过渡，可能拖慢渲染

自定义阴影真正麻烦的不是写法，而是和 border-radius、backdrop-filter、z-index 层叠顺序、以及深色模式下透明度感知之间的协同 —— 这些细节不测真机、不切实际场景，光看文档很难暴露问题。