边框半径和溢出隐藏与子元素背景的相关性

Question

我在包含溢出隐藏的包装器上使用了border-radius，遇到了问题。

我使用伪元素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>

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

为了应用动画效果，伪元素必须处于绝对定位。我已经移除了这个例子中的动画效果。

我该如何解决这个问题？

- aroge

---

你为什么不使用 :before 元素作为蓝色覆盖元素的原因是什么？ - roberrrt-s

@Roberrrt 是的，那只是一个例子，这里有另一个按钮透明背景的例子：http://jsfiddle.net/92rxaqh9/5/ 这是一个悬停动画在按钮上，问题仍然存在。 - aroge

这是一个抗锯齿问题。它在边框半径中很常见。- https://stackoverflow.com/search?tab=votes&q=%5bcss%5danti-alias%20border-radius - Paulie_D

Answer 1

这里有一个解决方法。将#container这个外部div加上overflow:hidden和width:300px样式即可。

#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>

- Bhuwan

---

谢谢你的示例，它有效！需要一个容器来做这件事有点遗憾，但我认为没有其他解决方案。 - aroge

Answer 2

你发现了一个非常有趣的渲染问题。我的解决方法是稍微调整颜色和逻辑：

#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>

- Peter

---

谢谢，我尝试了您的解决方案，但在我的情况下，有时我必须使用动画使按钮透明。因此颜色不能成为我的解决方案。例如：https://jsfiddle.net/92rxaqh9/5/ 在这个例子中，我们可以看到右上角和右下角有一个白色边框。 - aroge