:focus-visible { outline-offset: 4px; }

`:focus-visible` 是CSS伪类选择器，用于匹配当前元素在获得焦点时是否应该显示轮廓线。

`outline-offset` 是CSS属性，用于设置轮廓线外边缘与元素边缘之间的距离。

综合起来，`:focus-visible { outline-offset: 4px; }` 这条CSS规则的作用是，当某个元素在获得焦点时，如果浏览器检测到该元素应该显示轮廓线，则将轮廓线的外边缘与元素边缘之间的距离设置为4像素。

通常，当用户使用键盘导航时，浏览器会自动显示轮廓线，以帮助用户确定当前聚焦的元素。但是，这种行为在某些情况下可能会影响页面的外观和可用性，例如当元素已经有其他视觉效果时。通过使用 `:focus-visible` 和 `outline-offset`，可以更好地控制轮廓线的显示和样式，以提高页面的可访问性和用户体验。

相关问题

focus-visible

:focus-visible是一个伪类，用于判断元素的聚焦行为是由键盘还是鼠标触发的。它可以帮助我们在样式中区分键盘触发的聚焦行为和鼠标触发的聚焦行为。具体来说，当用户使用键盘的Tab键或快捷键触发焦点元素时，:focus-visible会应用焦点环样式。而当用户使用鼠标点击焦点元素时，:focus-visible不会应用焦点环样式。这样，我们可以根据:focus-visible来设置不同的样式，比如去除鼠标点击时的outline轮廓，保留键盘访问时的outline轮廓。在Chrome浏览器中，它被认为是键盘访问触发的元素聚焦的表示。所以，如果我们想要去除鼠标点击时的outline轮廓，而保留键盘访问时的outline轮廓，只需要使用一条简单的CSS规则：:focus:not(:focus-visible) { outline: 0; }。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* [CSS常用伪类选择器详解](https://blog.csdn.net/qq_43293207/article/details/115034768)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [css新加特性](https://blog.csdn.net/weixin_42845571/article/details/127765132)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [强大的CSS：focus-visible伪类真的太6了！](https://blog.csdn.net/kaixinyitian77/article/details/90451883)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

button is-focus-visible

根据提供的引用内容，可以得知:focus-visible伪类可以判断是由键盘还是鼠标触发的聚焦行为。因此，如果想要让button元素在键盘聚焦时有不同的样式，可以使用:focus-visible伪类来实现。

以下是一个示例代码，当button元素通过键盘Tab触发聚焦时，会添加一个蓝色的边框样式：

button:focus-visible {
  outline: 2px solid blue;
}