如何用CSS在Safari中为圆形<button>添加圆角外轮廓outline

这是Safari浏览器的已知特性，其不会对outline属性做圆角裁切，无论元素设置多大的border-radius，outline始终会显示为矩形，该问题仅出现在Safari及旧版iOS Safari环境中。

首选解决方案（兼容性最佳） #

使用box-shadow模拟外轮廓效果，该属性在全平台浏览器均支持跟随圆角渲染，且可实现和原outline完全一致的视觉效果：

button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  background-color: black;
  display: inherit;
  /* 替换原outline相关配置，第一层阴影实现5px的透明间隙，第二层实现5px的黑色外轮廓 */
  box-shadow: 0 0 0 5px transparent, 0 0 0 10px black;
}

上述代码的视觉效果和你原本设置的outline: 5px solid black; outline-offset: 5px;完全一致，支持所有现代浏览器，包括全版本移动端iOS Safari、安卓Chrome等，无兼容性问题。

备选解决方案（适配复杂样式需求） #

如果有轮廓渐变、多重轮廓叠加等特殊需求，可以使用伪元素方案实现：

button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  background-color: black;
  display: inherit;
  position: relative;
}
button::after {
  content: "";
  position: absolute;
  /* 向外偏移量 = 间隙宽度 + 轮廓宽度：5px + 5px = 10px */
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border-radius: inherit;
  border: 5px solid black;
  box-sizing: border-box;
  pointer-events: none; /* 避免伪元素遮挡按钮的点击、hover等交互事件 */
}

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