Question

我在包装器上的border-radius有一个问题，包含一个隐藏的溢出。

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

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

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

我该如何解决这个问题？

Answer 1

修复就在这里。将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>

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>

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

2 个答案: