边界半径不影响内部元素 [英] Border-radius doesn't affect inner elements

问题描述

我有一个布局，其中所有页面内容都在一个圆角框中。这包括页面标题等。我有一个包含页眉内容的div元素，一个包含页面主要内容的div元素，以及一个包含页脚的div元素。我的问题是：由于我的"Header"div的边框不是四舍五入的，所以大的"容器"div似乎在顶部没有四舍五入。我调查过，发现这只是"Header"div叠加在"容器"div上。我这里有一个示例：http://jsfiddle.net/V98h7/。

我曾尝试将"Header"div的边框圆化到相同的程度，但这在边框上产生了一个小缺陷(它获得了"Header"div的背景色的自己的边框)。 无奈之下，我也尝试将容器的z-index设置得很大。这没有做任何事情。

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

推荐答案

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

添加-

#outer {
   overflow: hidden;
}

它将正常工作。

有关overflow property can be found on MDN的详细信息。

这篇关于边界半径不影响内部元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！