如何为Bootstrap 5的focus-ring添加outline-offset以提升可访问性？

要给Bootstrap的focus-ring添加偏移（让轮廓与元素间产生空白），最优方案是利用Bootstrap原生的CSS变量或SCSS变量进行定制，无需额外复杂样式。以下是具体实现方式：

方法一：全局修改SCSS变量（推荐） #

在你的自定义SCSS文件中，在导入Bootstrap之前定义focus-ring的偏移变量，这样所有使用.focus-ring的元素都会自动应用偏移效果：

// 自定义focus-ring偏移量
$focus-ring-x: 2px;
$focus-ring-y: 2px;
// 可按需调整模糊度，默认是0
$focus-ring-blur: 0;

// 导入Bootstrap核心SCSS
@import "bootstrap/scss/bootstrap";

编译后，.focus-ring的box-shadow会自动包含你设置的偏移值，实现元素与轮廓间的空白。

方法二：覆盖.focus-ring类样式 #

如果已经导入了Bootstrap，可直接覆盖.focus-ring的CSS变量，实现全局偏移：

.focus-ring {
  --bs-focus-ring-x: 2px;
  --bs-focus-ring-y: 2px;
  // 可选：调整模糊效果
  // --bs-focus-ring-blur: 1px;
}

方法三：自定义扩展类（仅给特定元素用） #

如果不想全局修改，可创建一个扩展类，需要时和.focus-ring配合使用：

.focus-ring-offset {
  --bs-focus-ring-x: 2px;
  --bs-focus-ring-y: 2px;
}

使用示例：

<button class="btn focus-ring focus-ring-offset">带偏移焦点环的按钮</button>

为什么这是最优方案？ #

Bootstrap的.focus-ring本身就是通过box-shadow实现的（而非outline，因为outline不支持偏移属性），直接修改对应的偏移变量完全符合Bootstrap的设计逻辑，既保证了可访问性，又无需额外DOM元素或复杂样式。

内容的提问来源于stack exchange，提问作者Luke K