为什么相同厚度和相同位置的边框没有完全重叠？

Question

在Firefox 64.0中执行以下代码时，与黑色边框相同的粗细和相同位置的白色边框会稍微突出。我设置的top，left属性为position: absolute元素，但它并没有帮助我。

为什么白线在黑色边框之外？我们如何解决这个问题？

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10vw;
  height: 10vw;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  z-index: 1;
}

span::before,
span::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #000;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-135deg);
  z-index: -1;
}

span::before {
  border: 2px solid #fff;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

<span></span>

问题图片：

Answer 1

正如李斯特先生所说，这是由于抗锯齿所致，但我将尝试解释为什么这会产生您所看到的效果。简而言之，如果你有一条像素对角线，它看起来就像一个正方形的“楼梯”，而且不美观。抗锯齿将这些粗糙/锯齿状边缘周围的像素颜色设置为与边缘颜色相似，以使这些边缘看起来更平滑。您所看到的是黑色圆圈下方出现的白色圆圈的抗锯齿效果，有点像日食。

这是一张参考图片（中线没有抗锯齿，右线有抗锯齿）：