Question

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

我已经尝试将“标题”div的边界四舍五入到相同的范围，但是这会在边框上创建一个小缺陷（它获得了自己的边框，“标题”{{1背景颜色）。出于绝望，我还尝试将容器的z-index设置为大数。那什么都没做。

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

Answer 1

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

添加 -

#outer {
   overflow:hidden
}

它会起作用。

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;
}

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

Answer 3

这里是更新jsfiddle

http://jsfiddle.net/V98h7/1/

只是圆角边角border-radius可以取4个值TOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-LEFT-RADIUS

所以border-radius: 20px 20px 0 0;将从顶部绕过你的内部div。请记住使用与父div相同的半径值，否则您将看到一些额外的边界。

Answer 4

边界修复css border-radius背景颜色出血和内部元素打破边框半径。这可能有助于解决奇怪的边界故障。

/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; 
-webkit-background-clip: padding-box;
background-clip: padding-box;

此参考资料在http://css3please.com/找到 https://stackoverflow.com/a/7052769/9071880

Answer 5

尝试为容器div提供比标题div稍大的边框半径（在顶部两个角上）。

边界半径不会影响内部元素

5 个答案: