Почему границы одинаковой толщины и одинакового положения не полностью перекрываются?

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

Как сказал мистер Листер, это из-за сглаживания, но я постараюсь объяснить , почему это создает эффект, который вы видите.Короче говоря, если у вас диагональная линия пикселей, она будет выглядеть как «лестница» из квадратов и не будет радовать глаз.Сглаживание устанавливает цвета пикселей вокруг этих шероховатых / неровных краев, чтобы они были похожи на цвет краев, чтобы эти края выглядели более гладкими.То, что вы видите, - это сглаживание белого круга, появляющегося под черным кругом, вроде солнечного затмения.

Вот изображение для справки (средняя линия без сглаживания, правая линия с сглаживанием.):