html - 边界半径不影响内部元素

Question

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

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

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

Answer 1

这是 fiddle - http://jsfiddle.net/ashwyn/V98h7/2/

添加-

#outer {
   overflow: hidden;
}

它会起作用。

有关 overflow property can be found on MDN 的更多信息.