当孩子的边界半径相同时，父母泄漏的背景

Question

#outer {
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 20px;
}

#inner {
  width: 200px;
  height: 50px;
  background-color: steelblue;
  border-radius: 20px 20px 0 0;
}

body {
  background-color: steelblue;
}

<div id="outer">
  <div id="inner"></div>
</div>

您可以看到，即使父母的边框半径相同，父母的白色背景也在孩子的后面漏水。我该如何预防？

编辑：两个重复的问题都不能正确回答我的问题。泄漏仍然会在第一个问题中发生。第二个问题的带标记的答案使用图像和Javascript，无需对此进行修复。

Answer 1

您可以更改CSS以获得类似的布局，而不会出现此问题：

#outer {
  width: 200px;
  height: 200px;
  background:
   linear-gradient(to bottom,steelblue 50px,white 0);
  border-radius: 20px;
}


body {
  background-color: steelblue;
}

<div id="outer">
</div>