Question

我有一个div作为内容框，并在标题内有另一个div。外部div设置了border-radius，但内部div隐藏了它。

HTML：

<div id='box'>
    <div id='boxTitle'>
        This is the title
    </div>
</div>

CSS：

#box {
    height: 250px;
    width: 250px;
    border-radius: 10px;
    background: #bbb;
}
#boxTitle {
    width: 100%;
    background: #000;
    color: #fff;
    text-align: center;
}

JSFiddle：http://jsfiddle.net/AAUbA/

如何修复它以便我可以看到外部顶部的圆角？

Answer 1

在overflow: hidden元素上使用#box：

#box {
    height: 250px;
    width: 250px;
    border-radius: 10px;
    background: #bbb;
    overflow: hidden
}

请在此处查看更新的小提琴：http://jsfiddle.net/AAUbA/2/

顺便说一句：值得考虑添加供应商前缀以确保更好的跨浏览器兼容性。

This是关于如何使用该属性的好文章。您可以使用this tool自动生成所需的CSS。

Answer 2

在框的顶角上给#boxTitle相同的半径。如前所述，您还可以使用overflow:hidden;将溢出设置为隐藏。两者都有效，但如果你想添加#box以外的东西，它将不会显示，这段代码会显示：

HTML：

<div id='box'>
    <div id='boxTitle'>
        This is the title
    </div>
</div>

CSS：

#box {
    height: 250px;
    width: 250px;
    border-radius: 10px;
    background: #bbb;
}

#boxTitle {
    width: 100%;
    background: #000;
    color: #fff;
    text-align: center;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}

JSFiddle demo

Answer 3

在你的#box元素上添加overflow：hidden。

内部div隐藏的边界半径

3 个答案: