4.2 颜色边框与阴影工具类

4.2 颜色边框与阴影工具类

外观族三兄弟：颜色（文字色、背景色、边框色、链接色共享一组语义词根）、边框（粗细、颜色、圆角、宽度归零）、阴影（无、小、常规、大三档）。语义色不是调色盘而是「角色名」——primary 意为「主操作」，danger 意为「危险后果」，改主题色时全套组件跟着换，这正是第 5 章变量体系的前情。

位置：工具类四案第二案。颜色断案贯穿组件章的每个示例（btn-primary、text-bg-success 都来自这族词根），本节把词根表、上色路径与透明度变体一次立清。

词根表：九个角色管全部上色

<!-- 上色路径一：文字色 text-* -->
<p class="text-danger">支付超时，订单已关闭</p>
<p class="text-body-secondary">更新于三分钟前（次要信息用次级灰）</p>

<!-- 上色路径二：背景 bg-*（注意：不自动配文字色） -->
<p class="bg-warning-subtle p-2 rounded">浅黄底提示：bg 只管底色，字色要另判</p>

<!-- 上色路径三：一次性判齐 —— text-bg-* 底与字同时判 -->
<span class="badge text-bg-success">已支付</span>
<span class="badge text-bg-danger">已关闭</span>
<!-- 对比徽章场景：badge 需要底与字对比到位，text-bg-* 是官方推荐的合判写法 -->

<!-- 上色路径四：链接 link-*（带 hover 变化，比手写 a 样式省一组状态） -->
<a href="#" class="link-primary">查看订单详情</a>

<!-- 上色路径五：边框色 border-* -->
<div class="border border-start-danger border-4 ps-3">左侧红条：危险的视觉锚</div>
​

五条路径的分工裁决：给内容上色用 text-，给容器上底用 bg-，两者要成对出现的场合（徽章、标签）合判 text-bg-*。bg-warning-subtle 这类「浅色调变体」来自 5.3 的色阶扩展：每个主色都有 normal/subtle 两档，大面积底色优先 subtle，normal 档留给小面积强调。

边框与圆角：加减两判

<!-- 加边框与定向边框 -->
<div class="border p-2 mb-2">四边 1px 默认色</div>
<div class="border-top border-danger p-2 mb-2">只留顶边且染红（其余边没有）</div>
<div class="border border-2 border-primary p-2 mb-2">四边 2px 主色</div>

<!-- 减边框：组件去壳的常用刀法 -->
<div class="card border-0 shadow-sm">无边界卡片：靠阴影承担轮廓</div>
<table class="table table-borderless">无竖线表格：数据更清爽</table>

<!-- 圆角家族：0、1、2、3（默认）、4、5 与圆形 -->
<div class="rounded-3 p-2 bg-body-tertiary">默认圆角 8px</div>
<div class="rounded-4 p-2 bg-body-tertiary">大圆角 16px：现代卡片风</div>
<div class="rounded-pill px-3 py-1 bg-body-tertiary d-inline-block">胶囊：随高度自动半圆</div>
<img src="avatar.jpg" class="rounded-circle" alt="头像">
<!-- 断点变体同样存在：rounded-start / rounded-end / rounded-top / rounded-bottom 定向收角 -->
​

裁决口径：边框默认 1px 灰，border-0 到 border-5 调粗细；「定向染边」是内容块最便宜的身份标识——顶边、起点边一条色带胜过整块上底色。

阴影：三档加免档

<div class="shadow-none p-3 mb-2 bg-body-tertiary rounded">无影：平面风、表格内嵌块</div>
<div class="shadow-sm p-3 mb-2 bg-body rounded-3">小影：卡片默认档，几乎无感</div>
<div class="shadow p-3 mb-2 bg-body rounded-3">常规：浮层、下拉菜单档</div>
<div class="shadow-lg p-3 bg-body rounded-3">大影：modal、toast 独占</div>
<!-- 解读：阴影档位与层级语义绑定——sm 给静物，常规给弹出物，lg 给遮罩上的对话框 -->
​

阴影断案的隐藏规则：影随层走。同一个卡片，放在栅格里用 shadow-sm，被脚本弹到页面上（tooltip、popover）就自动升到常规档——框架内部正是这样判的。手工上影时对齐这套语义，页面的空间感才一致。

💡 关键直觉：外观族的所有颜色都来自 Sass 变量表（第 5.1 节），工具类只是变量的「零售渠道」。看到 text-danger 要想到背后的 $danger——换主题色时你在零售层改一个类名都没用，得回立法层改变量。

案例：状态灯组件的三级判决

背景：监控页需要一排「服务状态灯」：运行中（绿）、降级（黄）、宕机（红），要求浅底深字、圆点加文字，且 hover 不变色。

操作：

<span class="d-inline-flex align-items-center gap-2 rounded-pill px-3 py-1 bg-success-subtle">
  <span class="p-2 rounded-circle bg-success"></span>
  <span class="small text-success-emphasis">运行中</span>
</span>
<span class="d-inline-flex align-items-center gap-2 rounded-pill px-3 py-1 bg-warning-subtle">
  <span class="p-2 rounded-circle bg-warning"></span>
  <span class="small text-warning-emphasis">降级</span>
</span>
<span class="d-inline-flex align-items-center gap-2 rounded-pill px-3 py-1 bg-danger-subtle">
  <span class="p-2 rounded-circle bg-danger"></span>
  <span class="small text-danger-emphasis">宕机</span>
</span>
​

结果：三枚胶囊灯成型，浅底不刺眼、圆点色饱和、文字用同族强调色（*-emphasis）保证浅底上的对比度。

解读：本判例用满了外观族的三层能力——bg-subtle 浅底、同族圆点 normal 档、text-emphasis 强调字色。「同族三档」是 5.3 色阶体系给的成套判决，不必自己调和对比度。另外用 d-inline-flex + gap 排点与字，没写一行 margin。

变式：要求整枚灯可点击——外包 a 标签加 link- 无关紧要，直接判 text-decoration-none，hover 时给胶囊换 bg-success-subtle 到 bg-success 的过渡需要自写两条 CSS，已越过工具类的边界，进入第 5.2 节 CSS 覆盖的辖区。

结案要点

• 九个语义词根贯穿按钮、徽章、提示、链接所有组件，上色路径按内容（text）、容器（bg）、成对（text-bg）三分；
• 浅底用 subtle 档、浅底上的文字用同族 emphasis 档，对比度白送；
• 边框可加可减，定向染边是最便宜的身份标识；圆角默认 3 档、胶囊与圆形随形自动；
• 阴影三档与层级语义绑定：sm 静物、常规浮层、lg 遮罩对话框；
• 一切颜色类背后都是 Sass 变量——零售层换色无效时，回 5.1 立法层。

下一节排字：字号字重与文本溢出三判。