css - 为什么相同厚度和相同位置的边框不完全重叠？

Question

当你在Firefox 64.0中执行下面的代码时，与黑边相同粗细和相同位置的白边略微突出。我为 position: absolute 元素设置了 top,left 属性，但它对我没有帮助。

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

*,
*::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

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

这里有一张图片供引用(中线没有抗锯齿，右线有抗锯齿。):