less - 边框半径不影响内部元素

Question

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

我已经尝试将“header”的边框四舍五入div到相同的程度，但这会在边框上产生一个小缺陷（它获得了自己的边框，即“header”div的背景色）。无奈之下，我还尝试将容器的 z-index 设置为很大的数字。那没有做任何事情。

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

Answer 1

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

添加 -

#outer {
   overflow: hidden;
}

它会起作用。

overflow可以在 MDN 上找到有关该属性的更多信息。

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 边框半径背景颜色出血和内部元素破坏边框半径的边框修复。这可能有助于解决奇怪的边界故障。

/* 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 稍大的边框半径（在顶部两个角上）。