CSS圆形出现白色细边问题咨询：填充层为何未完全覆盖底层？

这是个很常见的浏览器亚像素渲染导致的视觉小坑，我来帮你理清原因和解决办法：

问题根源 #

当你给元素设置border-radius: 35px（等同于宽高的数值，也就是圆形）时，浏览器会对圆形边缘做抗锯齿处理——生成半透明的过渡像素来让边缘看起来更平滑。虽然你的.fill元素z-index更高，但它的高度只有50%，在圆形顶部边缘，.fill的边缘和.bg的边缘在亚像素层面会有渲染偏差，导致.bg的白色半透明像素透出来，形成那条细白边。

几种可行的解决方案 #

方案1：简化实现（最推荐） #

直接用背景渐变替代两个叠层div，从根源避免叠层渲染的问题。只需要修改.bg的样式，删掉.fill元素即可：

div.bg {
  background: linear-gradient(to bottom, black 50%, white 50%);
  z-index: 1;
}

修改后的完整代码：

<style>
body { background: black; } 
#asd { 
  height: 35px; 
  width: 35px; 
  border-radius: 50%; /* 用50%比固定数值更灵活，适配尺寸变化 */
  overflow: hidden; 
  position: relative; 
} 
span { 
  color: red; 
  text-align: center; 
  font-size: 10px; 
  line-height: 35px; 
  position: absolute; 
  height: 100%; 
  width: 100%; 
  z-index: 3; 
} 
#asd div.bg { 
  height: 100%; 
  width: 100%; 
  position: absolute; 
  background: linear-gradient(to bottom, black 50%, white 50%);
  z-index: 1; 
} 
</style>
<div id="asd"> 
  <span>lorem</span> 
  <div class="bg"></div> 
</div>

这个方案不仅解决了边缘透色问题，还减少了DOM元素，代码更简洁易维护。

方案2：微调.fill的尺寸覆盖边缘 #

如果你坚持保留两个div的结构，可以让.fill的尺寸稍微大一点，覆盖掉.bg的抗锯齿像素：

div.fill {
  background: black;
  height: 51% !important; /* 比50%高1px，覆盖顶部边缘 */
  width: 101%; /* 宽也加1px，确保左右边缘也覆盖 */
  transform: translate(-0.5%, 0); /* 水平居中偏移，修正加宽后的位置 */
  z-index: 2;
}

通过轻微放大.fill，让它的边缘完全覆盖.bg的过渡像素，从而消除细白边。

方案3：调整.fill的border-radius #

给.fill设置比父元素稍大的圆角，让它的边缘向外延伸一点，覆盖.bg的边缘：

div.fill {
  background: black;
  height: 50% !important;
  border-radius: 36px 36px 0 0; /* 比父元素的35px大1px */
  z-index: 2;
}

这个方法利用圆角的向外扩展，把.bg的边缘过渡像素盖住。

内容的提问来源于stack exchange，提问作者Heiko