Question

正如您所看到的，内部h1的背景颜色与包含div的圆角重叠。如果你在内部h1上设置一个较小的半径，这有点固定，但这是一个黑客。（取消注释评论的CSS，看看我的意思。）

版本2（23，真的）

http://jsfiddle.net/QSp2W/23/但我不知道如何应用*选择器只指导儿童，而不是孙子女。

Answer 1

我会给H1和p CSS属性而不是div，如下所示。您可以仅为边框创建一个类，并将它们应用于相应的元素。

CSS：

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;
}

这是单独的边界类： http://jsfiddle.net/QSp2W/9/

Answer 2

将overflow: hidden添加到包含div的内容可以有效地获得所需的背景，但它似乎会覆盖边框！所以，不太完美...... :)。

Answer 3

你可以这样做http://jsfiddle.net/yuliantoadi/QSp2W/8/

Answer 4

最直接的方法是让div h1继承div。

所以border-radius: inherit;而不是设置半径＃。

http://jsfiddle.net/jasongennaro/QSp2W/10/

内部元素应该由外部元素边界半径修剪

版本2（23，真的）

4 个答案: