本文介绍了边界半径不影响内部元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个布局，其中所有页面内容都在一个圆角框中。这包括页面标题等。我有一个包含页眉内容的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的详细信息。
这篇关于边界半径不影响内部元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！