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

你的问题是抗锯齿，这会导致颜色混合，以防止“锯齿状”，并使颜色看起来正在流血。但是，如果放大，则可以看到没有出血。那个，并且浮点数没有准确存储，因此CSS对圆的计算略有偏差。

我会使用像Adobe Illustrator或InkScape这样的东西，甚至是在线矢量图形工具，并制作你想要的SVG。

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

Answer 2

这是你想要的吗？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

两个边界相互叠加，没有排成一行

2 个答案: