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

简而言之，当我在父级使用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边缘周围的部分透明度渗透。没有办法解决这个问题。

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

2 个答案: