当父元素和子元素都具有边框半径时，有没有办法防止父元素的背景出现在边缘？

Question

假设我们在另一个 div 中有一个 div；父 div 和子 div 都具有相同的边框半径，并且子 div 的宽度和高度是父 div 的 100%。如果父项的背景与子项的背景不同，则该背景的细线将在子项的圆角周围可见：

这就是它的样子：

以下是 CodePen 上的示例：http://codepen.io/azangru/pen/MKdQmG

还有代码本身：

HTML：

<div class="dark-bg">
  <div class="outer">
    <div class="middle">
      <div class="inner">
      </div>
    </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;
}

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

.inner {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 10px;
}

有没有办法防止父母的背景从孩子身后出现（我的意思是不完全移除父母的背景）？

Answer 1

试试这个：

  .inner {
     border-radius: 8px;
  }

为什么？ http://www.mrgeek.me/technology/tutorials/web-design/css3-border-radius-property-explained/

看看它的工作原理：

http://codepen.io/anon/pen/RrmQeG