Border-Radius没有正确对齐

I am trying to create a div with rounded corners. Inside this div contains additional content that will fill up the height of this div. I've noticed that there is some visual corruption at each corner of the rounded div. It looks to me that the corner of the outer div is lightly larger than the inner div. According to my code, the border-radius of both divs should be identical.

我正在尝试创建一个圆角的div。在这个div内包含额外的内容,将填补这个div的高度。我注意到圆角div的每个角都有一些视觉腐败。在我看来,外部div的角落比内部div略大。根据我的代码,两个div的border-radius应该是相同的。

Example of issue: http://jsfiddle.net/MRZaF/4/

问题示例:http://jsfiddle.net/MRZaF/4/

Image of issue: http://imgur.com/Ph6IhLc

问题图片:http://imgur.com/Ph6IhLc

<div class="a-a">
    <div class="a-b">Content in here</div>
</div>
<br><br>
<div class="b-a">
    <div class="b-b">Content in here</div>
</div>

div.a-a { background:red; border-radius:10px; width:400px; }
div.a-b { background:aqua; border-radius:10px; height:200px; }
div.b-a { background:red; border-radius:10px; width:400px; overflow:hidden; }
div.b-b { background:aqua; width:400px; height:200px; }

3 个解决方案

#1

There are couple of option to do this.
First option: Slightly increase the border-radius of parent container

有几个选项可以做到这一点。第一个选项:略微增加父容器的border-radius

div.a-a 
{ 
  background:red;  
  border-radius:13px; 
  width:400px; 
}

Second option: Remove the border-radius from parent element and just use it for child element and set the background none.

第二个选项:从父元素中删除border-radius,并将其用于子元素,并将背景设置为none。

div.a-a 
{ 
  background:none;  
  width:400px; 
}

JS Fiddle Demo

JS小提琴演示

#2

Don't put it under put it on top and you wont get that.

不要把它放在顶部,你不会得到它。

div.a-a { background:red; border-radius:10px; width:400px; } div.a-b { background:aqua; border-radius:10px; height:200px; }

div.a-a {background:red;边界半径:10px的;宽度:400像素; } div.a-b {background:aqua;边界半径:10px的;高度:200像素; }

div.b-a { background:red; border-radius:10px; width:400px; overflow:hidden; } div.b-b { background:aqua; border-radius:10px; width:400px; height:200px;}

div.b-a {background:red;边界半径:10px的;宽度:400像素;溢出:隐藏; } div.b-b {background:aqua;边界半径:10px的;宽度:400像素;高度:200像素;}

jsfiddle.net/MRZaF/5/

#3

NOTE: More of some additional error tracing than an answer & +1 for interesting question

注意:对于有趣的问题,更多的是一些额外的错误跟踪而不是答案+1

Yup you're right. There's some kind of minimal corruption, at least pretty visible when you look at it in the browser at 100% zoom level. However, the more you zoom in, the smaller the bug gets; at 500% like 1/10th of a pixel. Your css is correct, so I assume this must be a browser-rendering issue. I don't immediatly find any issue about it in the chrome bug list https://code.google.com/p/chromium/issues/list though.

你是对的。有一种最小的腐败,至少在浏览器中以100%缩放级别查看它时非常明显。但是,放大的越多,bug越小;在500%像1/10像素。你的CSS是正确的,所以我认为这必须是一个浏览器渲染问题。我不会立即在Chrome错误列表https://code.google.com/p/chromium/issues/list中找到任何有关它的问题。

However, should you really want to hide those overlapping corners, you can still have a workaround by setting a margin: -0.6px -0.6px; and a width: parents width + margin*2 for the child. I don't know, maybe screen matters as well as to the error margin. And Sachin's workarounds work as well of course.

但是,如果您真的想要隐藏那些重叠的角落,您仍然可以通过设置边距来解决方法:-0.6px -0.6px;和宽度:父母宽度+边距* 2为孩子。我不知道,也许屏幕问题以及误差范围。萨钦的解决方案当然也有效。

I updated your test case: http://jsfiddle.net/MRZaF/7/ with some different values to trace the error margin. It seems like at 100% browser view, the difference is about 0.5px from the 'real' positioning, then when you zoom in to say 500%, it gets narrower and narrower.

我更新了您的测试用例:http://jsfiddle.net/MRZaF/7/,其中包含一些不同的值来跟踪误差范围。看起来在100%的浏览器视图中,与“真实”定位差异大约是0.5px,然后当你放大到500%时,它变得更窄更窄。

#1