由内部 div 隐藏的边界半径答案

【问题标题】：Border-radius hidden by inner div由内部 div 隐藏的边界半径
【发布时间】：2014-02-20 18:05:16
【问题描述】：

我有一个 div 作为内容框，并且在其中有另一个 div 作为标题。外部 div 设置了边框半径，但内部 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/

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

【问题讨论】：

你可以把border-top-left和border-top-right放到#boxTitle.

标签： html css

【解决方案1】：

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

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

在此处查看更新的 Fiddle：http://jsfiddle.net/AAUbA/2/

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

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

【讨论】：

完美！我感谢 x-browser 支持的链接 :)
+1 作为旁注：现在you could dropped the vendor-prefixes 用于border-radius 属性。
很高兴能帮上忙！完成后，请随意标记正确答案（它有助于网站的未来访问者找到答案），如果您需要进一步的帮助，请随时提出更多问题。
如果它允许我会在 7 分钟内完成 :)
@HashemQolami 是绝对正确的，您不一定需要顺便使用供应商前缀。这一切都取决于你的目标是谁。您可以查看最新的兼容性图表here（该站点是一个非常有用的参考点）。对于以前的 iOS 和 Andriod 设备，您仍然需要使用 -webkit。

【解决方案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

【讨论】：

我想过这个，但觉得会有点乱
@matt1985 为什么会“有点乱”？
它不会很乱，就像我写的那样：使用overflow:hidden; 会更乱，因为如果你想在盒子外面放一些东西，它就不会显示出来。因此我不想使用overflow:hidden;，因为它没有必要。

【解决方案3】：

添加溢出：隐藏在您的#box 元素上。

【讨论】：