Bootstrap 5 阴影颜色自定义 shadow-primary-Bootstrap教程-PHP中文网

Bootstrap 5 默认不支持 shadow-primary 等颜色变体，其 shadow- 类仅提供尺寸分级且使用固定灰黑色；需手动定义 .shadow-primary 并完整设置 box-shadow 值（含偏移、模糊、颜色及透明度），推荐使用 CSS 变量 var(--bs-primary-rgb) 和 !important 确保生效。

Bootstrap 5 默认不支持 `shadow-primary` 这类颜色变体

bootstrap 5 的 shadow- 工具类（如 shadow-sm、shadow、shadow-lg）只提供尺寸分级，不绑定颜色——它用的是 rgba(0, 0, 0, 0.2) 或 rgba(0, 0, 0, 0.15) 这类固定黑/灰透明色。所以写 shadow-primary 不会生效，也不会报错，只是被忽略。

如果你在自定义 CSS 中定义了 .shadow-primary，但没覆盖 box-shadow 的完整值（比如只改了 color 却漏了 offset/scale/blueradius），也会失效。

检查浏览器开发者工具：选中元素 → 查看 box-shadow 是否被覆盖或被更高优先级规则重置
Bootstrap 5 的 shadow 工具类本身没有 !important，所以你的自定义样式只需同等或更高特异性就能生效
别依赖 Sass 变量自动注入：即使你改了 $primary，shadow- 类也不会读取它

手动添加 `shadow-primary` 的两种可靠方式

推荐直接写 CSS，避免引入额外构建步骤或不确定的 Sass 编译行为：

.shadow-primary {
  box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.3) !important;
}

说明：

var(--bs-primary-rgb) 是 Bootstrap 5 内置 CSS 变量，安全可用；不用硬编码 #0d6efd
用 !important 是为了确保压过 Bootstrap 原生 .shadow 类（它没加 !important，但可能因顺序或选择器权重被覆盖）
数值参考原生 shadow：偏移 0 0.5rem + 模糊 1rem，透明度调低到 0.3 避免过重
如果要适配深色模式，可配合 @media (prefers-color-scheme: dark) 调整 rgba() 里的 alpha 值

用 Sass 扩展时必须重写整个 `box-shadow` 值

如果你项目已用 Bootstrap Sass，可以在自定义 SCSS 文件里复用其函数：

VPS Bootstrap

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

下载

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

.shadow-primary {
  @include box-shadow(0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.3));
}

注意点：

不能只写 box-shadow: rgba(var(--bs-primary-rgb), 0.3) —— 这会丢掉 offset 和 blur，结果是“无阴影”
别漏掉 @import 顺序：functions 和 variables 必须在 mixins 前
如果用的是 Bootstrap 官方 CDN（非 Sass 构建），这条路走不通——CSS 变量可用，但 @include box-shadow() 是编译期行为