发出小的1px，2px间距，同时使用边框半径（在所有浏览器中）

Question

以上是http://prntscr.com/66o7rf上方问题的屏幕。 当我在父div中使用border-radius并与具有相同border-radius值的另一个背景重叠时，会出现一个小空间（在屏幕中，出现空白区域）。 我尝试使用背景：之前和之后，但我不认为这是一个很好的方法。

有人可以帮忙吗？

body{
    background: grey;
}
div {
    width: 200px;
    height: 200px;
    background: #000;
    border-radius: 10px;
    padding-top: 160px;
    overflow: hidden;
}
.footer {
    width: 200px;
    height: 40px;
    background: #f00;
}

<div>
    <div class="footer"></div>
</div>

Answer 1

在父div中使用border-radius时，不要设置overflow：hidden。并且对于重叠的div或子div，它为它添加border-radius但比parent div少2px。 示例：

div{
background: #fff;
border-radius: 10px;
}

.child{
background: blue;
border-radius: 8px;
}