带边框半径的线/边框，溢出：隐藏和彩色背景

Question

请看这个JSFiddle： https ：//jsfiddle.net/fmhhg00d/3/

<div><span>•</span></div>

div {
 width: 500px;
 height:500px;
 background: blue;
 overflow: hidden;
 border-radius:50%; /* --> Remove this and it's alright */
}

span {
 line-height:0.20;
 font-size: 2500px;
 color: white;
}

在这里看到问题

简而言之，当我在父级使用overflow：hidden和border-radius时，Chrome / Edge / Firefox是否都会留下一个小的蓝色边框？ 有没有办法绕过这个？

Answer 1

也就是说，正如Ouroborus回答的那样，是一个反别名问题。

作为解决方法，您可以使用伪元素来实现给定的布局

 body { background: #f8f8f8; } div { position: relative; width: 500px; height:500px; overflow: hidden; border-radius:50%; } div::before, div::after { content: ''; position: absolute; top: 0; left: -180px; width: 500px; height:500px; background: blue; } div::after { left: 140px; background: white; border-radius:50%; } 

 <div></div> 

Answer 2

您所看到的是由反别名合成引起的。 span与div分开绘制和消除锯齿，然后它们分层。 div边缘的部分透明度通过span边缘的部分透明度渗出。 没有办法解决这个问题。