两个边框在彼此之上，没有对齐

Question

嘿，你们在这里玩 CSS 真的很沮丧，基本上我试图用 z-index 重叠边界以获得 1/5 边界 2/5 边界 3/5 边界的视觉效果和圆的第 4/5 个边界

但是这样做绝对定位的边框并没有完全对齐，你可以看到它后面的颜色渗出，这是为什么？我还应该怎么做？这里是 jsFiddle 代码如下。

.circle {
  padding: 20px;
  border: 20px solid transparent;
  border-top-color: red;
  position: absolute;
  border-radius: 50px;
  z-index: 0;
}
.two {
  border-top-color: blue;
  z-index: 1;
}

<div class="circle"></div>
<div class="circle two"></div>

Answer 1

您的问题是抗锯齿，它会导致颜色混合以防止 "jaggies" 并使颜色看起来像是在渗色。但是，如果放大，可以看到没有出血。那，浮点数没有准确存储，所以 CSS 的圆计算略有偏差。

我会使用 Adobe Illustrator 或 InkScape 之类的工具，甚至是在线矢量图形工具，然后根据需要制作 SVG。

VERDICT：使用像 Adobe Illustrator 或 InkScape 之类的东西，甚至是在线矢量图形工具，并制作你想要的 SVG。

Answer 2

这是你想要的吗？

.circle {
  padding: 20px;
  border: 20px solid;
  border-top-color: red;
  position: absolute;
  border-radius: 50px;
  z-index: 0;
}

.circletwo {
  border-top-color: blue;
  z-index: 123;
}

<div class="circle"></div>
<div class="circletwo"></div>

两个边框在彼此之上，没有对齐

Two borders on top of each other, are not lined up

html

css

border