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

Question

假设我们在另一个 div 中有一个 div；父子 div 具有相同的 border-radius，子元素的宽度和高度是父元素的 100%。如果 parent 的背景与 child 的背景不同，则在 child 的圆 Angular 周围会看到一条细线:

这是它的样子:

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

有没有办法防止 parent 的背景从 child 身后出现(我的意思是不完全移除 parent 的背景)？

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