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

I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a div element that contains my header content, a div that contains the main content of the page, and a div that contains the footer. My problem is this: Since the border of my "header" div is not rounded, the large "container" div seems to not be rounded at the top. I have investigated, and shown that this is simply the "header" div superimposing itself over the "container" div. I have an example here: http://jsfiddle.net/V98h7/.

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

I have tried rounding the border of the "header" div to the same extent, but this creates a small defect on the border (it gains a border of its own, of the "header" div's background color). Out of desperation, I also tried setting the z-index of the container to a large number. THat did not do anything.

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

I feel that there should be a simple solution to this problem. I do not want a javascript fix. I would prefer CSS, but LESS is ok too.

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

5 个解决方案

#1

Here is the fiddle - http://jsfiddle.net/ashwyn/V98h7/2/

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

Add -

添加 -

#outer {
   overflow:hidden
}

and it will work.

它会起作用。

#2

Use this:

用这个：

#outer { overflow: hidden; }

or this:

或这个：

#inner1 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

Or you maybe can try this:

或者你可以试试这个：

#outer div:first {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

(Note: I haven't tested the last option above).

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

#3

here is the update jsfiddle

这是更新jsfiddle

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

To just round border corners border-radius can take 4 values TOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-LEFT-RADIUS

只是圆角边界半径可以取4个值TOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-LEFT-RADIUS

so border-radius: 20px 20px 0 0; will round your inner div from top. Remember to use the same radius value as that of the parent div, else you will see some extra border.

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

#4

Border fix for css border-radius background color bleed and inner elements breaking border radius. This might help with the weird border glitches.

边界修复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;

This reference was found here http://css3please.com/ by https://*.com/a/7052769/9071880

此参考资料可在此处找到http://css3please.com/，网址为https://*.com/a/7052769/9071880

#5

-1

Try giving the container div a slightly larger border radius (on the top two corners) than the header div.

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

#1