• 前端
• UI组件

BOOTSTRA.386 是一个以 1980 年代 DOS 界面为灵感、基于 Bootstrap 的复古主题框架，本仓库同时维护了 v2/v3/v4/v5 多个版本。本文聚焦 v4.4.1 文档 Shadows 所讲解的box-shadow工具类，讲解.shadow-none、.shadow-sm、.shadow、.shadow-lg四种尺寸的用法与配套变量，并结合仓库 SCSS 源码说明这些工具类在复古主题下如何生效、$enable-shadows开关的真正作用，以及与 BOOTSTRA.386 特色 DOS 硬阴影（dos-shadow）的关系。读完本文，你将能够在 BOOTSTRA.386 中按需为任意元素快速添加或移除阴影，并理解"为什么这个主题里很多阴影默认看起来像没有"。

一、官方文档说了什么：一句话概括

v4.4.1 阴影文档 的核心内容非常明确：

在 Bootstrap 中，组件阴影默认是关闭的，可以通过$enable-shadows变量启用；此外还可以用box-shadow工具类为元素快速添加或移除阴影。工具类包含.shadow-none以及三个默认尺寸（分别对应一组关联变量）。

这与原版 Bootstrap 4 的工具类设计完全一致，BOOTSTRA.386 的 v4 分支沿用了这一机制。文档中给出了官方示例（见下文"示例"小节），我们将在源码层面逐一验证其背后的实现。

二、四种工具类：示例、效果与源码实现

2.1 官方示例

文档中提供的演示代码（组合了阴影、内边距、外边距、背景与圆角工具类）：

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div> <div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div> <div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div> <div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

四行分别演示：无阴影、小阴影、常规阴影、大阴影。同时借助p-3（内边距）、mb-5（下外边距）、bg-light/bg-white（背景色）、rounded（圆角）让阴影效果在白色或浅色背景上清晰可见——在深色 DOS 屏幕上阴影难以观察，这也是示例刻意使用浅色背景的原因。

2.2 源码实现：.shadow-none是唯一"硬编码"的类

在 BOOTSTRA.386 v4.4.1 中，阴影工具类只有一个独立的 SCSS 文件：scss/utilities/_shadows.scss，其全部内容为：

// stylelint-disable declaration-no-important .shadow-none { box-shadow: none !important; }

注意两点：

1. 它只定义了.shadow-none，并且带!important，确保即使组件自身声明了阴影，也能被强制移除；
2. .shadow-sm、.shadow、.shadow-lg在 v4.4.1 的 SCSS 中并没有显式定义。原因在于：BOOTSTRA.386 的主题变量把阴影尺寸统一改成了none（见下一节），所以文档示例中"小/常规/大"三档在默认编译结果下与"无阴影"视觉等价。这正是官方文档那句"组件阴影默认关闭"在源码层面的体现——不是类不存在，而是主题默认值把所有阴影都清零了。

该文件通过 scss/_utilities.scss 中的@import "utilities/shadows";进入构建，进而由 scss/bootstrap.scss 统一引入。

2.3 配套变量：为什么默认"没有阴影"

文档提到"三个默认尺寸（具有关联变量）"。在 v5.3.1 的 scss/_variables.scss 中可以看到这组变量的完整声明：

// scss-docs-start box-shadow-variables $box-shadow: none !default; $box-shadow-sm: none !default; $box-shadow-lg: none !default; $box-shadow-inset: none !default; // scss-docs-end box-shadow-variables

四个变量全部默认none，即主题层面主动取消了所有阴影。原版 Bootstrap 4 中$box-shadow-sm的默认值是0 .125rem .25rem rgba(0, 0, 0, .075)这类真实投影，而 BOOTSTRA.386 为了贴合 DOS 纯色无投影的视觉风格，将其全部改写为none。因此在 BOOTSTRA.386 中，仅靠.shadow-sm/.shadow/.shadow-lg类名无法获得阴影，除非你在自己的编译中重新覆盖这三个变量。

（从源码结构可以推断：v4.4.1 的阴影尺寸类同样依赖$box-shadow*系列变量生成，但其 scss/utilities/_shadows.scss 只保留了.shadow-none的静态声明，尺寸类交由整体 utilities 机制处理。）

三、$enable-shadows开关：全局组件阴影的"总闸"

文档明确提到组件阴影默认关闭，可通过$enable-shadows启用。在 scss/_variables.scss 中可以看到：

$enable-shadows: false !default;

它与$enable-rounded（圆角）、$enable-gradients（渐变）、$enable-transitions（过渡）等一起位于"Options（选项）"段落，是主题全局造型开关之一。BOOTSTRA.386 的 v4 变量表将其设为false，意味着：

• 各类组件（按钮、下拉框、输入框、弹窗等）在编译时不会自动附带阴影样式；
• 即使把$box-shadow*系列变量改成具体投影值，也仍需配合$enable-shadows: true才能在相关组件上全面生效。

作为对照，v5.3.1 的 scss/_variables.scss 同样保持$enable-shadows: false !default;，可见"默认禁用组件阴影"是贯穿 BOOTSTRA.386 多个版本的统一设计决策。

使用建议：工具类（.shadow-none等）不受$enable-shadows开关限制，它们始终可用；该开关只影响组件内置阴影的生成。若希望在 BOOTSTRA.386 中恢复"真实投影"风格，需要同时做两件事：① 将$enable-shadows改为true；② 为$box-shadow、$box-shadow-sm、$box-shadow-lg赋予非none的值。

四、主题特色的 DOS 硬阴影（dos-shadow）：另一种"阴影"哲学

理解了工具类之后，必须区分：BOOTSTRA.386 的"阴影"有两种完全不同的实现路径。

4.1 工具类是标准 CSS 投影

.shadow-sm/.shadow/.shadow-lg/.shadow-none操作的是标准box-shadow属性，即真实投影（元素背后有半透明模糊的投影层）。这类阴影默认被主题清零。

4.2 组件硬阴影是filter: drop-shadow

主题组件（按钮、下拉菜单、模态框等）真正使用的复古"阴影"定义在 scss/mixins/_dos.scss：

@mixin dos-shadow($color: black) { filter: drop-shadow($line-height / 2 $space-width 0 $color); margin-right: (1 + 5/$sz) * $space-width; // margin bottom you're on your own }

它与box-shadow无关，而是用filter: drop-shadow生成一种无模糊、纯色偏移的硬阴影，模拟 DOS 字符图形的立体感。其中：

• $line-height / 2是纵向偏移（在 v4 中$line-height为$line-height-base，见 scss/_variables.scss）；
• $space-width（即$font-size-base/2，见 scss/_variables.scss）是横向偏移；
• 模糊半径固定为0，颜色默认黑色，从而形成干净的"实体边缘"效果；
• 同时通过margin-right为阴影让出横向空间，避免阴影溢出遮挡相邻内容。

4.3 硬阴影的实际应用位置

从源码可见dos-shadow被广泛用于核心组件：

• scss/_buttons.scss：大按钮（.btn-lg）先套用dos-solid-border再套用dos-shadow，并额外增加margin-bottom: $line-height-base + 6px为底部阴影留白；
• scss/_dropdown.scss：下拉菜单整体使用dos-shadow；
• scss/_modal.scss：模态框及其内部按钮都使用dos-shadow。

这些组件阴影与工具类互不干扰：工具类控制元素的box-shadow，组件硬阴影走filter。这也是文档示例中"阴影默认关闭"与界面仍保有 DOS 立体感的根本原因——主题关闭的是标准投影，保留的是像素级硬阴影。

五、v5 中的变化：工具类改为"生成器"配置

如果你在 BOOTSTRA.386 v5.3.1 中使用阴影工具类，实现方式已升级为 Bootstrap 5 的 utilities 生成器机制。在 scss/_utilities.scss 中：

// scss-docs-start utils-shadow "shadow": ( property: box-shadow, class: shadow, values: ( null: $box-shadow, sm: $box-shadow-sm, lg: $box-shadow-lg, none: none, ) ), // scss-docs-end utils-shadow

这把shadow定义为一组可迭代的 utility 配置：属性固定为box-shadow，类前缀为shadow，四个取值分别映射到$box-shadow、$box-shadow-sm、$box-shadow-lg和字面量none，最终生成.shadow、.shadow-sm、.shadow-lg、.shadow-none。由于 v5 的 变量表 仍将这三种投影值设为none，所以默认编译下shadow系列类依然不会产生可见投影——与 v4 行为一致。

六、在 BOOTSTRA.386 中实战使用阴影工具类

6.1 直接使用（默认编译）

引入 BOOTSTRA.386 的已编译 CSS 后，可直接在 HTML 中使用工具类：

<!-- 移除任何潜在阴影，带 !important 强制生效 --> <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div> <!-- 以下三档在默认主题下视觉等价于无投影 --> <div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div> <div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div> <div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

6.2 自定义编译：恢复真实投影

若使用本仓库的 SCSS 源码自行编译（以 v4.4.1 为例，入口为 scss/bootstrap.scss），在引入变量文件前覆盖默认值：

// 1. 启用组件阴影 $enable-shadows: true; // 2. 自定义三个尺寸的投影（示例为 Bootstrap 4 风格默认值） $box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075); $box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); $box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175); @import "bootstrap";

重新编译后，.shadow-sm、.shadow、.shadow-lg将呈现真实投影，而.shadow-none仍可随时强制关闭；同时启用$enable-shadows后，输入框、按钮等组件的焦点阴影变量（如 scss/_variables.scss 的$input-btn-focus-box-shadow）也会按其定义生效。

6.3 组合其他工具类

阴影工具类可与边框、间距、背景、圆角等工具类自由组合，实现卡片、弹层、导航栏等立体层次。仓库内置示例（如 album 示例、pricing 示例）大量使用了.shadow-sm配合card、navbar等组件——在默认主题下它们的作用主要是"占位与语义标注"，一旦你在自定义编译中恢复投影值，这些示例会立刻呈现出预期的层次感。

七、常见问题与小结

• 为什么加了.shadow-sm却没看到阴影？因为 scss/_variables.scss 中$enable-shadows: false，且$box-shadow*系列变量在主题中全部为none（v5 见 scss/_variables.scss）。这是复古主题的刻意设计，而非工具类失效。
• .shadow-none一定生效吗？一定。它编译为box-shadow: none !important（scss/utilities/_shadows.scss），可覆盖组件自带的标准投影。
• .shadow-none能移除 DOS 硬阴影吗？不能。组件硬阴影使用的是filter: drop-shadow（scss/mixins/_dos.scss），不受box-shadow工具类影响。
• v4 与 v5 的用法有差异吗？类名与语义一致；v5 改为 utilities 生成器配置（scss/_utilities.scss），自定义方式不变——覆盖对应$box-shadow*变量即可。

总结：BOOTSTRA.386 的阴影工具类完整继承了 Bootstrap 的box-shadow体系（.shadow-none/.shadow-sm/.shadow/.shadow-lg），默认状态由$enable-shadows: false与$box-shadow*: none双重决定；理解它与dos-shadow硬阴影的并存关系，是正确掌握该主题阴影系统的关键。

• 前端
• UI组件