css - 嵌套边界半径问题

Question

我有一个 div与 border-radius: 20px应用于它。表示div里面的第一个元素是一个 h2带有背景颜色。 div's半径不影响 h2根本没有，所以我最终会从我的 div 中伸出两个尖 Angular 。我尝试在 h2 的右上角和左上角应用半径。但这在 div's 之间留下了一小片白色 Angular 落和h2's Angular 落。

我尝试减少 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 本身的元素的所有 Angular 应用 border-radius ，则浏览器只需在高度的一半上应用圆 Angular 的元素。例如，如果您有一个 div，其高度为 10ox，并且如果您为每个 Angular 应用 5px 半径，则浏览器仅应用 5px 你的 10px border-radius 到每个 Angular 落。这并不意味着你有 5px border-radius 这意味着只有 5 个顶部像素会受到影响。

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

查看fiddle