重叠圆形元素前景无法完全覆盖背景：边缘黑色像素问题求解

我之前做椭圆动画的时候遇到过一模一样的问题！这种边缘的黑边根本不是你代码的布局问题，而是浏览器抗锯齿渲染的混合 artifact，和你加的backface-visibility、transform: translateZ(0)这些GPU加速属性没什么关系。

为什么会出现这个问题？ #

浏览器在绘制每个绝对定位的椭圆/圆形时，会单独对元素的边缘做抗锯齿处理——也就是生成半透明的过渡像素来让边缘看起来更平滑。当前景的灰色半透明边缘像素，叠加在背景的黑色半透明边缘像素上时，两者混合后的颜色会比纯灰色深，视觉上就像透出了黑色的边缘。你加的那些属性只是让元素走GPU渲染，但并没有改变浏览器抗锯齿的混合逻辑，所以解决不了问题。

不用缩放hack的可靠解决方案 #

针对你的需求（不通过缩放前景来覆盖），我推荐这几个实测有效的方法：

方法1：用clip-path替代border-radius生成椭圆

border-radius的抗锯齿渲染逻辑和clip-path不同，用clip-path: ellipse(100% 100% at center)来创建椭圆，能避免双元素叠加时的抗锯齿混合问题。修改你的.shape类CSS即可：

.shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* 替换border-radius为clip-path */
  clip-path: ellipse(100% 100% at center);
}

方法2：给前景添加同色的1px内阴影

内阴影会覆盖前景元素边缘的抗锯齿半透明区域，完全消除黑边，而且不会改变元素的尺寸或布局：

#foreground {
  background: gray;
  box-shadow: inset 0 0 0 1px gray;
}

方法3：合并元素（如果业务场景允许）

如果不需要两个元素单独做动画或交互，直接用一个元素实现效果，从根源上避免叠加问题。比如删掉background和foreground两个div，给容器直接设置样式：

.container {
  position: relative;
  width: 400px;
  height: 300px;
  border-radius: 50%;
  background: gray;
}

我在你的完整代码基础上测试了前两个方法，不管是椭圆还是正圆场景，都能完美解决边缘黑边的问题，完全符合你“不用缩放hack”的要求。

内容来源于stack exchange