边界半径不影响内部元素

Question

我有一个布局，其中所有页面内容都在一个圆角框中。这包括页面的标题等。我有一个 div 包含我的标题内容的元素，一个 div 包含页面的主要内容，以及 div 包含页脚。我的问题是：由于我的“标题” div 的边框没有圆角，所以大“容器” div 似乎没有在顶部圆角。我已经调查过，表明这只是“标题” div 将自身叠加在“容器”上 div 。我这里有一个例子：http: //jsfiddle.net/V98h7/ 。

我已经尝试将“标题”的边界 div 到相同的程度，但这会在边界上产生一个小缺陷（它获得了自己的“标题”的边界 div 的背景颜色）。无奈之下，我也尝试将容器的 z-index 设置为一个很大的数字。那什么也没做。

我觉得这个问题应该有一个简单的解决方案。我不想要 javascript 修复。我更喜欢 CSS，但 LESS 也可以。

原文由 diracdeltafunk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是小提琴 - http://jsfiddle.net/ashwyn/V98h7/2/

添加 -

 #outer {
   overflow: hidden;
}

它会起作用的。

有关 overflow 属性的更多信息，请参见 MDN 。

原文由 Ashwin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

用这个：

 #outer { overflow: hidden; }

或这个：

 #inner1 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

或者你也许可以试试这个：

 #outer div:first {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

（注意：我还没有测试上面的最后一个选项）。

原文由 Silvio Delgado 发布，翻译遵循 CC BY-SA 3.0 许可协议