如何解决圆角容器内img元素圆角处透出背景色的问题

问题根因 #

这个圆角处的细线是浏览器抗锯齿渲染机制导致的：父元素overflow: hidden裁切圆角时，边缘会产生半透明过渡像素，刚好透出了img元素设置的红色背景色，不属于代码逻辑错误，是浏览器渲染的常见小问题。

可行解决方案 #

方案1：子元素同步继承圆角（最推荐，无副作用） #

直接给img元素设置和父元素相同的圆角，从根源避免边缘间隙透出背景，还可以用inherit实现自动同步父元素的圆角配置，不需要重复写数值：

.child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: red;
  /* 新增以下两行 */
  border-radius: inherit;
  /* 可选：触发GPU渲染优化边缘显示 */
  transform: translateZ(0);
}

这个方案不影响图片加载失败时的红色背景显示，也不会改变元素原有布局。

方案2：img外扩1px覆盖间隙（适配不方便改圆角的场景） #

如果业务场景不允许给子元素加圆角，可以让img稍微比父容器大1px，刚好盖住边缘的间隙：

.child {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: -1px;
  object-fit: cover;
  background-color: red;
}

这个方案图片的显示区域和原有效果完全一致，只是边缘多了1px的裁切，肉眼不可察，同样兼容加载失败的背景显示需求。

方案3：父元素触发GPU渲染（兼容旧版本浏览器场景） #

给父元素加3D变换触发GPU层级渲染，优化裁切的抗锯齿效果，不需要改动子元素配置：

.parent {
  border-radius: 10px;
  overflow: hidden;
  /* 新增以下行 */
  transform: translateZ(0);
}

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