彼此之上的兩個邊框，沒有排隊

嘿那裏有一個非常令人沮喪的時間在這裏用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/ –

彼此之上的兩個邊框，沒有排隊

回答

相關問題