内部div隐藏的边界半径

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/

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

这是关于如何使用该属性的一个很好的记录.您可以使用此工具自动生成所需的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 演示