Electron与Chrome CSS渲染差异：聚焦元素outline形状异常问题

针对Electron里Tab聚焦元素的outline显示方形、但Chrome中正常的问题，即使CSS规则无差异，也可以从这几个方向排查解决：

1. 检查Electron的Chromium版本 #

Chrome从Chromium 88版本开始支持outline跟随元素的border-radius呈现圆角，如果你的Electron基于旧版Chromium（比如v11及以下），就会出现这个差异。

• 解决：升级Electron到v12.0.0及以上的稳定版，直接跟进Chromium的新特性支持。

2. 用box-shadow替代outline（兼容性最优） #

如果不想升级Electron，box-shadow是更可靠的方案——它天然支持圆角，在所有Electron版本和Chrome中表现一致：

:focus-visible {
  outline: none; /* 移除默认的方形outline */
  /* 模拟圆角聚焦外框，可根据需求调整颜色、厚度和偏移 */
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
  border-radius: 8px; /* 与元素自身圆角保持一致 */
}

3. 强制覆盖Electron默认代理样式 #

Electron自带的用户代理样式可能悄悄覆盖了你的设置，用更高优先级的选择器或!important强制生效：

/* 针对所有可聚焦元素的聚焦状态 */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 8px !important;
}

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