Question

这是我刚才问过的question的扩展。然而，这次问题更具体，更接近我正在努力的实际情况。

如果另一个元素中有一个元素，并且父元素和子元素都有border-radius，并且父元素的背景与子元素不同，则它会在子元素的圆角周围可见。

如果父元素上有overflow: hidden属性，则问题会更加严重。然后，solution涉及使子元素的border-radius小于父元素的border-radius不再起作用。

CodePen上的示例：http://codepen.io/azangru/pen/pgmOvJ（观察子元素黑色背景下方的黄色背景）。

HTML：

<div class="dark-bg">
  <div class="outer">
    <div class="middle">
      <div class="inner">
      </div>
    </div>
    <div class='some-text'>
      This is text. There can be quite a decent amount of text here, so the outer div needs to have overflow: hidden. Like this, you see?
    </div>
  </div>
</div>

CSS：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.dark-bg {
  height: 100%;
  width: 100%;
  padding-top: 10px;
  background: black;
}

.outer {
  width: 200px;
  height: 200px;
  margin: auto;
  background: white;
  border-radius: 10px;
  overflow: hidden;
}

.middle {
  width: 100%;
  height: 50%;
  background: yellow;
  border-radius: 10px 10px 0 0;
}

.inner {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 10px 10px 0 0;
}
.some-text {
  margin-top: 20px;
  padding: 0 10px;
}

有没有办法让孩子的背景完全覆盖父母的背景？

（当然，一个显而易见的解决方案是从父项中删除overflow：hidden属性并为文本添加另一个容器，反过来又会溢出：hidden。但是，我真的不喜欢如果可能，那就去那样）

Answer 1

原因是背景的边框是抗锯齿的，然后允许通过它进行一定量的混合。

应用变换可以在某种程度上减少可见性：translateZ（0px）到内部元素。

一个不太通用但更有效的解决方案是将阴影应用于内部

似乎还有一个克隆基本元素属性的伪元素可以解决问题

＆＃13;

/*
.inner {
    box-shadow: 0px 0px 0px 1px black;  
}
*/


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.dark-bg {
  height: 100%;
  width: 100%;
  padding-top: 10px;
  background: black;
}

.outer {
  width: 200px;
  height: 200px;
  margin: auto;
  background: white;
  border-radius: 10px;
  overflow: hidden;
}

.middle {
  width: 100%;
  height: 50%;
  background: yellow;
  border-radius: 10px 10px 0 0;
}

.inner {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 10px 10px 0 0;
  position: relative;
}

.inner:after {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.some-text {
  margin-top: 20px;
  padding: 0 10px;
}

＆＃13;

<div class="dark-bg">
  <div class="outer">
    <div class="middle">
      <div class="inner">
      </div>
    </div>
    <div class='some-text'>
      This is text. There can be quite a decent amount of text here, so the outer div needs to have overflow: hidden. Like this, you see?
    </div>
  </div>
</div>

＆＃13;

当父级溢出时，父级的背景显示在子级边界半径周围：隐藏

1 个答案: