跳到主要内容
输入关键词开始搜索，↑ ↓ 选择，Enter 打开
没有找到匹配的文档

边框颜色

用于控制边框颜色和不透明度的工具。

查看原文
本页目录
类名样式
.border-primary--bs-bc: var(--bs-primary-bg);
border-color: var(--bs-bc);
.border-accent--bs-bc: var(--bs-accent-bg);
border-color: var(--bs-bc);
.border-success--bs-bc: var(--bs-success-bg);
border-color: var(--bs-bc);
.border-danger--bs-bc: var(--bs-danger-bg);
border-color: var(--bs-bc);
.border-warning--bs-bc: var(--bs-warning-bg);
border-color: var(--bs-bc);
.border-info--bs-bc: var(--bs-info-bg);
border-color: var(--bs-bc);
.border-inverse--bs-bc: var(--bs-inverse-bg);
border-color: var(--bs-bc);
.border-secondary--bs-bc: var(--bs-secondary-bg);
border-color: var(--bs-bc);
.border-bg--bs-bc: var(--bs-border-bg);
border-color: var(--bs-bc);
.border-body--bs-bc: var(--bs-border-body);
border-color: var(--bs-bc);
.border-muted--bs-bc: var(--bs-border-muted);
border-color: var(--bs-bc);
.border-subtle--bs-bc: var(--bs-border-subtle);
border-color: var(--bs-bc);
.边框强调--bs-bc: var(--bs-border-emphasized);
border-color: var(--bs-bc);
.border-white--bs-bc: var(--bs-border-white);
border-color: var(--bs-bc);
.border-black--bs-bc: var(--bs-border-black);
border-color: var(--bs-bc);
.边框-细微-主要--bs-bc: var(--bs-primary-border);
border-color: var(--bs-bc);
.边框-微妙-强调--bs-bc: var(--bs-accent-border);
border-color: var(--bs-bc);
.边框-细微-成功--bs-bc: var(--bs-success-border);
border-color: var(--bs-bc);
.边框-微妙-危险--bs-bc: var(--bs-danger-border);
border-color: var(--bs-bc);
.边框-细微-警告--bs-bc: var(--bs-warning-border);
border-color: var(--bs-bc);
.边框-细微-信息--bs-bc: var(--bs-info-border);
border-color: var(--bs-bc);
.边框-微妙-反向--bs-bc: var(--bs-inverse-border);
border-color: var(--bs-bc);
.边框-细微-次要--bs-bc: var(--bs-secondary-border);
border-color: var(--bs-bc);
.border-10border-color: color-mix(in oklch, var(--bs-bc) 10%, transparent);
.border-20border-color: color-mix(in oklch, var(--bs-bc) 20%, transparent);
.border-30border-color: color-mix(in oklch, var(--bs-bc) 30%, transparent);
.border-40border-color: color-mix(in oklch, var(--bs-bc) 40%, transparent);
.border-50border-color: color-mix(in oklch, var(--bs-bc) 50%, transparent);
.border-60border-color: color-mix(in oklch, var(--bs-bc) 60%, transparent);
.border-70border-color: color-mix(in oklch, var(--bs-bc) 70%, transparent);
.border-80border-color: color-mix(in oklch, var(--bs-bc) 80%, transparent);
.border-90border-color: color-mix(in oklch, var(--bs-bc) 90%, transparent);
.border-100border-color: var(--bs-bc);

颜色

改变 border-color 使用基于我们主题颜色的工具类 .border-{color} 和 .border-subtle-{color}. 所有这些边框颜色工具都设置了 border-color 属性到本地 CSS 变量， --bs-bc，其值为主题颜色。根颜色令牌的颜色值也使用 light-dark() 确保在明暗两种颜色模式下都有足够的对比度。

例如，.border-primary 将 --bs-bc 变量设置为 var(--bs-primary-border)：

CSS
          .border-primary {
  --bs-bc: var(--bs-primary-border);
  border-color: var(--bs-bc);
}

这种方法还允许我们轻松地使用我们的 .border-{opacity} 工具支持半透明，因为我们可以使用 color-mix() 配合 CSS 变量来生成适当的颜色。有关更多详细信息，请参阅 不透明度部分。

--bs-bc 变量在 @property 中注册为非继承（inherits: false），因此边框颜色工具类只作用于应用它们的元素，并且不会传递到嵌套的元素或组件中。这就是为什么 --bs-bc 特意独立于继承的 --bs-border-color 设计令牌，而组件默认边框是从该令牌中解析的原因。

主要的
主要的 微妙的
口音
口音微妙
成功
成功 微妙
危险
危险 微妙
警告
警告 微妙
信息
信息 微妙
反向
逆向微妙
次要
次要的 微妙的
背景
身体
静音
微妙的
强调
黑色
白色
HTML
<div class="border border-5 border-primary">primary</div>
<div class="border border-5 border-subtle-primary">primary subtle</div>
<div class="border border-5 border-accent">accent</div>
<div class="border border-5 border-subtle-accent">accent subtle</div>
<div class="border border-5 border-success">success</div>
<div class="border border-5 border-subtle-success">success subtle</div>
<div class="border border-5 border-danger">danger</div>
<div class="border border-5 border-subtle-danger">danger subtle</div>
<div class="border border-5 border-warning">warning</div>
<div class="border border-5 border-subtle-warning">warning subtle</div>
<div class="border border-5 border-info">info</div>
<div class="border border-5 border-subtle-info">info subtle</div>
<div class="border border-5 border-inverse">inverse</div>
<div class="border border-5 border-subtle-inverse">inverse subtle</div>
<div class="border border-5 border-secondary">secondary</div>
<div class="border border-5 border-subtle-secondary">secondary subtle</div>
<div class="border border-5 border-bg">bg</div>
<div class="border border-5 border-body">body</div>
<div class="border border-5 border-muted">muted</div>
<div class="border border-5 border-subtle">subtle</div>
<div class="border border-5 border-emphasized">emphasized</div>
<div class="border border-5 border-black">black</div>
<div class="border border-5 border-white">white</div>

或者修改组件的默认 border-color：

危险的航向
更改边框颜色和宽度
HTML
<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<div class="h4 pb-2 mb-4 fg-danger border-bottom border-danger">
  Dangerous heading
</div>

<div class="p-3 bg-info bg-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>

嵌套元素

因为边框颜色工具设置了非继承的--bs-bc变量，父元素的边框颜色不会影响嵌套元素的边框。如下所示，父元素使用了.border-danger，而嵌套的.border保持默认边框颜色。

带有 .border-danger 的父元素
嵌套的 .border 保持默认颜色
HTML
<div class="p-3 border border-danger rounded-5">
  Parent with .border-danger
  <div class="border p-3 mt-3">
    Nested .border keeps the default color
  </div>
</div>

不透明度

通过使用任何 .border-<percentage> 工具，可以改变边框颜色的不透明度，这些工具使用 color-mix() 将边框颜色与 transparent 混合，这要归功于上面提到的 CSS 变量方法。因为 --bs-bc 是作用于该元素的，请将这些不透明度工具与同一元素上的 .border-{color} 工具配对——它们不再从祖先继承边框颜色。

默认边框
90% 不透明度
80% 不透明度
70% 不透明度
60% 不透明度
50% 不透明度
40% 不透明度
30% 不透明度
20% 不透明度
10% 不透明度
HTML
<div class="border border-5 border-primary p-2 mb-2">Default border</div>
<div class="border border-5 border-primary border-90 p-2 mb-2">90% opacity</div>
<div class="border border-5 border-primary border-80 p-2 mb-2">80% opacity</div>
<div class="border border-5 border-primary border-70 p-2 mb-2">70% opacity</div>
<div class="border border-5 border-primary border-60 p-2 mb-2">60% opacity</div>
<div class="border border-5 border-primary border-50 p-2 mb-2">50% opacity</div>
<div class="border border-5 border-primary border-40 p-2 mb-2">40% opacity</div>
<div class="border border-5 border-primary border-30 p-2 mb-2">30% opacity</div>
<div class="border border-5 border-primary border-20 p-2 mb-2">20% opacity</div>
<div class="border border-5 border-primary border-10 p-2">10% opacity</div>

CSS

变量

scss/_root.scss
--border-width: #{$border-width},
--border-width-keyline: .5px,
--border-style: #{$border-style},
--border-color: light-dark(var(--gray-200), var(--gray-700)),
--border-color-translucent: color-mix(in oklch, var(--fg-body) 15%, transparent),

Sass 变量

用于在浅色和深色模式下设置border-color在.border-*-subtle工具类中的变量：

Sass 工具 API

边框颜色工具类在我们的工具类 API scss/_utilities.scss 中声明。了解如何使用工具类 API。

scss/_utilities.scss
"border-color": (
  property: (
    "--bc": null,
    "border-color": var(--bc)
  ),
  class: border,
  values: map.merge(theme-color-refs("bg"), theme-token-refs($theme-borders, "border")),
),
"border-color-subtle": (
  property: (
    "--bc": null,
    "border-color": var(--bc)
  ),
  class: border-subtle,
  values: theme-color-refs("border"),
),
"border-width": (
  property: border-width,
  class: border,
  values: map.merge($border-widths, (keyline: var(--border-width-keyline)))
),
"border-opacity": (
  class: border,
  property: border-color,
  values: theme-opacity-values(--bc)
),