ライン/ボーダー半径との国境、オーバーフロー：隠された着色背景

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

See the problem here

を、なぜクローム/エッジ/ Firefoxのすべてが理由です私はオーバーフローを使用すると小さな青色の枠線を残します：親にborder-radiusとhidden？これを回避する方法はありますか？

Answer 1

あなたが見ているのは、アンチエイリアス合成によるものです。 spanは、divとは別に描画され、アンチエイリアス処理され、レイヤーされます。 divのエッジの周りの部分的な透明度は、spanのエッジの周りの部分的な透明度を介して出ます。実際にこれを修正する方法はありません。

Answer 2

つまり、として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>