设置border-radius与overflow:hidden后父元素背景漏出1px边框的解决咨询

当给容器设置border-radius: 50%和overflow: hidden后，容器边缘会出现1px红色边框（来自容器的红色背景），流式布局场景下无法通过固定宽高解决，尝试isolation、border-collapse、masking等属性均无效。

原问题代码示例 #

CSS

.wrapper {
  margin: 100px;
}

.container {
  background: red;
  border-radius: 50%;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f2f2f2;
}

HTML

<div class="wrapper">
  <div class="container">
    <img src="https://www.freepnglogos.com/uploads/eagle-png/bald-eagle-png-transparent-image-pngpix-7.png" />
  </div>
</div>

可行解决方案 #

方案1：开启硬件加速

给容器添加transform: translateZ(0)，利用GPU渲染修正精度问题：

.container {
  background: red;
  border-radius: 50%;
  overflow: hidden;
  transform: translateZ(0);
}

方案2：用padding隐藏溢出背景

给容器设置padding: 1px并移除背景色，把红色背景移到内层包裹元素：

.wrapper {
  margin: 100px;
}

.container {
  border-radius: 50%;
  overflow: hidden;
  padding: 1px; /* 挡住溢出的1px背景 */
}

.inner {
  background: red;
  border-radius: 50%;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f2f2f2;
}

<div class="wrapper">
  <div class="container">
    <div class="inner">
      <img src="https://www.freepnglogos.com/uploads/eagle-png/bald-eagle-png-transparent-image-pngpix-7.png" />
    </div>
  </div>
</div>

方案3：使用mask替代overflow:hidden

用径向渐变实现圆形遮罩，比overflow:hidden的渲染精度更高：

.container {
  background: red;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, white 100%, transparent 100%);
  mask: radial-gradient(circle, white 100%, transparent 100%);
}

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