隐藏有儿童背景的边界半径和溢出

Question

我在包含隐藏溢出的包装器上遇到了边界半径问题。

我使用 before 伪元素（粉红色背景）来填充包装器的背景。包装纸已有背景（蓝色）。

#wrapper {
  background: blue;
  border: 2px solid pink;
  border-radius: 12px;
  height: 90px;
  overflow: hidden;
  position: relative;
  width: 300px;
}
#wrapper::before {
  background: pink;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
}

<div id="wrapper"></div>

在这个例子中，我们可以看到左上角和左下角有一个不需要的蓝色像素。

伪元素必须位于绝对位置才能应用动画。我删除了示例的动画。

我该如何解决这个问题？

Answer 1

您发现了一个非常有趣的渲染问题。我的解决方案是稍微切换一下颜色和逻辑：

#wrapper {
  background: pink;
  border: 2px solid pink;
  border-radius: 12px;
  height: 90px;
  overflow: hidden;
  position: relative;
  width: 300px;
}
#wrapper::before {
  background: blue;
  content: '';
  display: block;
  height: 100%;
  right: 0;
  position: absolute;
  top: 0;
  width: 50%;
}

<div id="wrapper"></div>

Answer 2

这里有一个修复。将 overflow:hidden 和 width:300px 应用于外部 div #container.

#container {
  width: 300px;
  overflow: hidden;
  border-radius: 12px;
}

#wrapper {
  height: 90px;
  background: blue;
  border-radius: 12px;
  position: relative;
  box-sizing: border-box;
  border: 2px solid pink;
}

#wrapper::before {
  background: pink;
  content: '';
  display: block;
  height: 100%;
  right: -30px;
  position: absolute;
  top: 0;
  width: 30px;
  border-radius: 50%;
  transition: transform 0.3s;
}

#wrapper:hover::before {
  transform: scale3D(10, 10, 1);
}

<div id="container">
  <div id="wrapper"></div>
</div>

隐藏有儿童背景的边界半径和溢出

Border-radius and overflow hidden with child background

css

border

colors

absolute

pseudo-element