彼此之上的两个边框，没有排队

嘿那里有一个非常令人沮丧的时间在这里用CSS，我基本上是试图重叠与z-index的边界来获得1/5边界的视觉2 /第5个边界3/5边界和第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>

来源

2016-10-11 Jeff Davenport

你的问题是抗混叠，从而导致颜色融为一体，以防止“锯齿”，并使其出现了颜色出血。但是，如果放大，您可以看到没有出血。那么，浮点数并不是精确存储的，所以CSS对圆的计算是非常轻微的。

我会使用Adobe Illustrator或InkScape，甚至是一个在线矢量图形工具，然后制作一个你想要的SVG。

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

来源

2016-10-11 02:03:31 theEpsilon

即使你做边框纯色，红色仍然流血蓝色边框https://jsfiddle.net/6qtLop51/2/背后，除了在你的片段我仍然可以看到红色背后的蓝色。 @theEpsilon –

@JeffDavenport你想要什么？大多是蓝色的，只有一点红色？ – theEpsilon

边框的蓝色部分完全呈蓝色并且为零红色。 –

这是你想要的吗？

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

来源

2016-10-11 02:11:13

不完全尝试使用像这样的1/5边框来实现保存结果https://jsfiddle.net/6qtLop51/9/ –

彼此之上的两个边框，没有排队

回答

相关问题