如何在Bootstrap中添加自定义的阴影效果类-Bootstrap教程-PHP中文网

直接用 box-shadow 写 css 更可靠，因为 bootstrap 5 的阴影类仅提供 4 档固定值，无法满足内阴影、多层、定向偏移等定制需求；自定义类如 .shadow-custom { box-shadow: 0 4px 12px rgba(0,0,0,.15); } 更灵活、不依赖构建流程且易维护。

如何在bootstrap中添加自定义的阴影效果类

为什么直接用 `box-shadow` 写 CSS 更可靠

Bootstrap 5 的 .shadow-sm 到 .shadow-lg 类只提供 4 档固定值，且全部基于 box-shadow 的预设参数（如 0 .125rem .25rem rgba(0,0,0,.075)）。一旦你需要深色背景下的内阴影、多层阴影、或特定方向偏移（比如仅底部投影），原生类就完全不够用了。

最稳妥的做法是自己写一个类，而不是试图覆盖 Bootstrap 的 shadow 变量或 hack 它的 Sass 编译流程——尤其当你只是偶尔需要一两个特殊效果时。

推荐直接在项目 CSS 文件（或 <style></style> 块）中添加：

.shadow-custom {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

这样既不依赖构建工具，也不影响其他组件样式。

如何避免自定义阴影被 Bootstrap 的 `!important` 覆盖

某些 Bootstrap 版本（尤其是旧版或第三方主题）会在 .shadow-* 类里加 !important。如果你发现自己的 .shadow-custom 不生效，大概率是 CSS 优先级问题。

解决方法很简单：

VPS Bootstrap

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

下载

确保你的自定义 CSS 在 Bootstrap CSS 之后加载（检查 <link> 或 @import 顺序）
如果仍冲突，给类加一层选择器权重，比如：.my-card .shadow-custom，或直接加 !important（仅限紧急修复）：box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
别用 [class*="shadow-"] 这类通用属性选择器去覆盖，容易误伤

用 Sass 扩展 Bootstrap 的 `$shadow` 变量（适合长期维护项目）

如果你用的是 Bootstrap 源码（Sass 版本），并且多个地方都需要统一管理阴影值，可以修改 $shadows map：

$shadows: (
  "sm": 0 .125rem .25rem rgba($black, .075),
  "md": 0 .5rem 1rem rgba($black, .15),
  "lg": 0 1rem 3rem rgba($black, .175),
  "xl": 0 2rem 6rem rgba($black, .2),
  "2xl": 0 4px 12px rgba($black, .15), // ← 新增
);

然后在 @include box-shadow() 或直接用 .shadow-2xl。注意：必须在 @import "bootstrap/scss/functions" 和 @import "bootstrap/scss/utilities" 之间注入该变量，否则不会被 util 工具类识别。