内部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/ 我该如何修复它，以便我可以看到外部顶部的圆角？

- Wildcard27

---

你可以将border-top-left和border-top-right属性放置在#boxTitle中。 - Vucko

Answer 1

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

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

在这里查看更新后的 Fiddle：http://jsfiddle.net/AAUbA/2/

另外：值得考虑的是添加厂商前缀，以确保更好的跨浏览器兼容性。

这篇文章介绍如何使用该属性。 您可以使用此工具自动生成所需的 CSS。

- johnkavanagh

---

太好了！我很感激提供跨浏览器支持的链接 :) - Wildcard27

作为一则旁注：现在可以省略border-radius属性的供应商前缀。参考浏览器兼容性。 - Hashem Qolami

很高兴能够帮到您！如果您已经解决了问题，请随意标记正确答案（这有助于未来的访问者找到答案），如果您需要进一步的帮助，请随时提出更多问题。 - johnkavanagh

等它让我开始，7分钟内完成。 - Wildcard27

@HashemQolami 绝对正确，顺便说一句，你不一定需要使用供应商前缀。这完全取决于你的目标对象。您可以在此处查看最新的兼容性图表（该站点是非常有用的参考点）。您仍然需要为早期的iOS和Andriod设备使用“-webkit”。 - johnkavanagh

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

- Daan

---

我考虑过这个问题，但认为这样做会有些混乱。 - Wildcard27

@matt1985 为什么会“有点凌乱”？ - Vucko

不会很混乱，因为我写了：使用 overflow:hidden; 会更混乱，因为如果你想要在盒子外面显示一些东西，它就不会被显示出来。因此，我不喜欢使用 overflow:hidden;，因为这并不是必要的。 - Daan

Answer 3

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

- Sunil Kr. Yadav