嵌套边界半径问题

Question

我有div申请了border-radius: 20px。所述div内的第一个元素是具有背景颜色的h2。 div's半径根本不会影响h2，所以我最终会从我的div中伸出两个尖角。我尝试在h2的右上角和左上角应用半径，但这会在div's角和h2's角之间留下一小块白色。

我尝试减少h2边框半径，但要完全移除白色，最后再次从div凸出......

我做错了什么？谢谢你的帮助！

这是jsFiddle

我的CSS基本上是：

#div {
border radius: 20px;
border: 2px solid #000;
}

#h2 {
margin-top: 0px;
border-radius: 20px 20px 0 0;
}

Answer 1

首先，你的代码中有一些拼写错误 border-radius而非border radius 然后，如果对高度小于border-radius的元素的所有角应用border-radius，则浏览器只需在元素高度的一半上应用圆角。例如，如果您的div高度为10ox，并且如果您为每个角应用5px半径，则浏览器只应用5px {10px border-radius 1}}到每个角落。这并不意味着您得到5px border-radius，这意味着只有5个顶部像素会影响。

在您的示例中，div的高度不足以接受20px border-radius。 如果您再应用height 40px，那么您可以获得完美的border-radius效果。

查看fiddle