Css 家长’；孩子周围的背景显示’；父对象溢出时的边界半径：隐藏

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

如果在另一个元素中有一个元素，并且父元素和子元素都有边界半径，并且父元素的背景与子元素的背景不同，则该元素在子元素的圆角周围可见

如果父元素上有

overflow:hidden

属性，则问题会更加严重。然后，使子元素的边界半径小于父元素的边界半径的方法不再有效

CodePen上的示例：（观察从子元素的黑色背景下方显示的黄色背景）

Html:

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

---

（当然，一个显而易见的解决方案是从父对象中删除overflow:hidden属性，并为文本添加另一个容器，而该容器又将具有overflow:hidden。但是，如果可能的话，我真的不想这样做）

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

通过对内部元素应用transform:translateZ（0px）可以使其不太可见

一个不太普遍但更有效的解决方案是在内部应用阴影

似乎一个伪元素（克隆基本元素属性）也可以解决这个问题

/*
.内部{
盒影：0px 0px 0px 1px黑色；
}
*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
.暗背景{
身高：100%；
宽度：100%；
填充顶部：10px；
背景：黑色；
}
.外部{
宽度：200px；
高度：200px；
保证金：自动；
背景：白色；
边界半径：10px；
溢出：隐藏；
}
.中{
宽度：100%；
身高：50%；
背景：黄色；
边界半径：10px 10px 0；
}
.内部{
宽度：100%；
身高：100%；
背景：黑色；
边界半径：10px 10px 0；
位置：相对位置；
}
.内：之后{
内容：“；
位置：绝对位置；
背景色：继承；
顶部：0px；
左：0px；
右：0px；
底部：0px；
}
.一些文字{
边缘顶部：20px；
填充：0 10px；
}

这是文本。这里可能有相当多的文本，因此外部div需要有overflow:hidden。像这样，你知道吗？

长方体阴影解决方案对我不起作用，因为我不能依赖黑色背景。

transform:translateZ（0px）

方法很有趣，谢谢。

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

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