带圆角边框且overflow:hidden的容器出现白色像素问题解决

当使用带有圆角边框且设置overflow:hidden的Div容器时，内部背景Div会在边框与背景之间出现白色像素。原代码如下：

CSS代码 #

.container {
  height: 300px;
  width: 300px;
  border: 2px solid red;
  border-radius: 15px;
  overflow: hidden;
}

.background {
  background: green;
  height: 100%;
  width: 100%;
}

HTML代码 #

<div class="container">
  <div class="background"></div> 
</div>

解决方法 #

• 方法一：给内部背景元素添加匹配的圆角
  让内部背景元素的圆角与容器完全一致，避免渲染时的边缘缝隙，可直接继承容器的圆角值，方便后续修改：

.container {
  height: 300px;
  width: 300px;
  border: 2px solid red;
  border-radius: 15px;
  overflow: hidden;
}

.background {
  background: green;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}

• 方法二：用clip-path替代overflow:hidden
clip-path的裁剪逻辑比overflow:hidden更精准，能避免浏览器渲染时的缝隙问题，注意clip-path的圆角值要和容器的border-radius一致：

.container {
  height: 300px;
  width: 300px;
  border: 2px solid red;
  border-radius: 15px;
  clip-path: inset(0 round 15px);
}

.background {
  background: green;
  height: 100%;
  width: 100%;
}

• 方法三：给容器设置与内部背景一致的背景色
  如果内部背景是纯色，给容器添加相同的背景色，即使存在缝隙也会被容器背景覆盖，不会显示白色：

.container {
  height: 300px;
  width: 300px;
  border: 2px solid red;
  border-radius: 15px;
  overflow: hidden;
  background: green;
}

.background {
  background: green;
  height: 100%;
  width: 100%;
}

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