实用程序类，允许您向元素和组件添加和修改自定义焦点环样式。
帮助程序删除默认值 on ，将其替换为可以更广泛地自定义的 。新的阴影由一系列继承自关卡的 CSS 变量组成，可以针对任何元素或组件进行修改。.focus-ringoutline:focusbox-shadow:root
例
直接单击下面的链接以查看对焦环的运行情况，或进入下面的示例，然后按 。Tab
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
Custom focus ring
</a>自定义
使用我们的 CSS 变量、Sass 变量、实用程序或自定义样式修改焦点环的样式。
CSS 变量
根据需要修改 CSS 变量以更改默认外观。--bs-focus-ring-*
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)">
Green focus ring
</a>.focus-ring通过全局 CSS 变量设置样式，这些变量可以在任何父元素上覆盖，如上所示。这些变量是从它们的 Sass 变量对应物生成的。
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
默认情况下，没有 、 或 ，但我们提供了回退到初始值的 CSS 变量。修改它们以更改默认外观。--bs-focus-ring-x--bs-focus-ring-y--bs-focus-ring-blur0
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
Blurry offset focus ring
</a>Sass 变量
自定义焦点环 Sass 变量，以修改 Bootstrap 支持的项目中焦点环样式的所有用法。
$focus-ring-width: .25rem;
$focus-ring-opacity: .25;
$focus-ring-color: rgba($primary, $focus-ring-opacity);
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
Sass 实用程序 API
除了 之外，我们还有几个实用程序来修改辅助类默认值。使用我们的任何主题颜色修改颜色。请注意，在当前颜色模式支持的情况下，浅色和深色变体可能不会在所有背景颜色上可见。.focus-ring.focus-ring-*
<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>焦点环实用程序在 中的实用程序 API 中声明。了解如何使用实用程序 API。scss/_utilities.scss
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
),