.focus-ring 帮助器修改默认的 outline 焦点状态，使用更易于自定义的样式。焦点环由一系列 CSS 变量组成，这些变量继承自 :root 级别，并且可以针对任何元素或组件进行修改。
示例
切换到下面的示例以查看焦点环效果，或切换到下面的示例然后按 Tab。
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
Custom focus ring
</a>变体
使用主题色工具类更改焦点环的颜色。辅助类会为给定的主题颜色引入--bs-theme-focus-ring CSS变量。
<a href="#" class="d-inline-flex focus-ring theme-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a>
<a href="#" class="d-inline-flex focus-ring theme-accent py-1 px-2 text-decoration-none border rounded-2">Accent focus</a>
<a href="#" class="d-inline-flex focus-ring theme-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a>
<a href="#" class="d-inline-flex focus-ring theme-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a>
<a href="#" class="d-inline-flex focus-ring theme-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a>
<a href="#" class="d-inline-flex focus-ring theme-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a>
<a href="#" class="d-inline-flex focus-ring theme-inverse py-1 px-2 text-decoration-none border rounded-2">Inverse focus</a>
<a href="#" class="d-inline-flex focus-ring theme-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a>自定义颜色
根据需要修改 --bs-focus-ring-color CSS 变量以更改默认外观。可以使用现有的主题变量或你自己的颜色。使用自定义颜色时，我们建议使用 light-dark() 来支持颜色模式，并使用 color-mix() 确保在不同背景上颜色略有偏差以增强对比度。
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: var(--bs-success-focus-ring)">
Green focus ring
</a>