border-radius显示角落中父div背景的轻微颜色

Question

我有一个问题，你可以清楚地看到孩子的右上角和左上角的父母。

我尝试在父级上使用overflow: hidden;以及在孩子身上使用border-radius。

这个问题有点难以解释，但你可以清楚地看到小提琴上的问题。

https://jsfiddle.net/2Lccaf0u/

编辑：这是一张显示问题的图片（使用chrome）

Answer 1

一个简单的解决方法是使outer元素的半径大于仅inner的顶部

body {
  background: #000;
}

.outer, .outer2 {
  width: 200px;
  height: 100px;
  border-radius: 15px 15px 5px 5px;
  background: #fff;
  margin-bottom: 20px;
}

.inner, .inner2 {
  background: #111;
  width: 100%;
  height: 50px;
  border-radius: 5px;
}

编辑：它正在发生，因为这是浏览器呈现它的方式。并非所有浏览器都会产生相同的结果。