Html 内部图元应按外部图元边界半径修剪

请看这里：

如您所见，内部

h1

的背景色与包含

div的
的圆角重叠。如果在内部
h1
上设置一个较小的半径，这有点固定，但这是一个hack。（取消注释已注释的CSS以了解我的意思。）

版本2（23，真的）
但是我不知道如何将
*
选择器仅应用于直接子代，而不应用于孙辈。
我将给出
H1
和
p
CSS属性，而不是如下所示的div。您可以仅为边框创建一个类，并将其应用于适当的元素


CSS:

这是一个单独的边界类：
将
溢出：隐藏
添加到包含
的div
可以有效地获取背景以执行所需操作，但它似乎覆盖了边框！所以，不太完美……：）
 您可以这样做
最直接的方法是让
divh1
继承
div

所以
边界半径：继承而不是设置半径#

+1非常好的解决方案-将边界框CSS保持在正确的位置，并强制孩子们按预期操作！很简单-但是如果我有div（）的背景，那就不行了。（我意识到这不是问题，只是指出了它。）此外，我还需要使用small-border-radius-hack。在我的示例中，我将border-radius设置为6px的原因是，如果将其设置为与父级相同，您可以得到它们之间的白色间距。您可以做的另一件事是将
背景色添加到所有
元素中，并将
边框底部半径添加到
p
。这似乎是最具视觉吸引力和灵活性的解决方案，下面是我如何应用它的：但我不确定如何使
*
只适用于孩子而不适用于孙子。就像这样
div>*
。这将仅选择div的直接子级。
div h1
{
    padding: 2px;
    background-color: #ff0000;
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Below gets it close but not quite. */
    /*border-radius: 7px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;*/
}

div p
{
    padding: 10px;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}