html - 小 1px，2px 间距的问题，同时使用边框半径(在所有浏览器中)

Question

这是上面问题的屏幕 http://prntscr.com/66o7rf .当我在父 div 中使用 border-radius 并与另一个具有相同 border-radius 值的背景重叠时，出现一个小空间(在屏幕中，出现空白)。我尝试在 :before 和 :after 中使用背景，但我认为这不是一个好方法。

有人可以帮忙吗？

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 但比父 div 小 2px。示例:

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

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