focus-visible 轮廓被 overflow-x:auto 父容器截断的解决方法咨询

我有一个可沿X轴滚动的按钮容器，为保障无障碍访问性设置了focus-visible样式，但该样式显示的轮廓会超出容器范围并被截断。希望即使轮廓超出容器边界仍能正常显示，请问有哪些实现技巧？

当前效果 #

期望效果 #

现有代码示例 #

.shortcuts {
 overflow-x: auto; 
}

.shortcut:focus-visible {
 outline: 0.125rem solid #9b0600;
 outline-offset: 0.125rem;
 z-index: 1;
}

实现技巧 #

1. 给滚动容器添加上内边距 #

给.shortcuts容器添加与outline-offset相等的左右内边距，让轮廓有足够空间显示，避免被容器边缘截断：

.shortcuts {
 overflow-x: auto;
 padding-left: 0.125rem;
 padding-right: 0.125rem;
}

优点是实现简单，缺点是会改变容器的视觉宽度，需配合布局调整适配。

2. 用伪元素模拟原生轮廓 #

放弃原生outline，改用伪元素绘制轮廓。给按钮设置相对定位，伪元素设为绝对定位，确保伪元素层级低于按钮内容、高于容器：

.shortcut {
 position: relative;
}

.shortcut:focus-visible::after {
 content: '';
 position: absolute;
 top: -0.25rem;
 left: -0.25rem;
 right: -0.25rem;
 bottom: -0.25rem;
 border: 0.125rem solid #9b0600;
 z-index: -1;
}

这种方法不受容器overflow属性影响，但需要手动控制伪元素的定位与尺寸。

3. 用clip-path扩大容器裁剪范围 #

给滚动容器添加clip-path属性，将容器的裁剪范围向外扩展，容纳轮廓的偏移量：

.shortcuts {
 overflow-x: auto;
 /* 左右向外扩展轮廓+偏移量的总宽度（0.125rem+0.125rem=0.25rem） */
 clip-path: inset(0 -0.25rem 0 -0.25rem);
}

该方案不会改变容器布局空间，是较优雅的解决方式，现代浏览器均支持clip-path的inset语法。

4. 给按钮套外层容器规避裁剪 #

将按钮包裹在额外的父元素中，给父元素设置左右margin留出轮廓空间，让按钮的轮廓不被滚动容器截断：

<div class="shortcuts">
  <div class="shortcut-wrapper">
    <button class="shortcut">按钮</button>
  </div>
</div>

.shortcuts {
 overflow-x: auto;
}

.shortcut-wrapper {
 margin: 0 0.125rem;
}

.shortcut:focus-visible {
 outline: 0.125rem solid #9b0600;
 outline-offset: 0.125rem;
 z-index: 1;
}

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