Question

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

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

问题图片：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; }

Answer 1

不要把它放在上面，你不会得到它。

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

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

jsfiddle.net/MRZaF/5 /

Answer 2

有几种选择可以做到这一点 第一个选项 ：稍微增加父容器的边框半径

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

第二个选项 ：从父元素中删除border-radius，然后将其用于子元素并将背景设置为无。

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

JS Fiddle Demo

Answer 3

注意：比答案更多的一些额外错误跟踪＆amp; +1有趣的问题

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

但是，如果你真的想要隐藏那些重叠的角落，你仍然可以通过为孩子设置margin: -0.6px -0.6px;和width: parents width + margin*2来解决这个问题。我不知道，也许屏幕问题以及误差范围。萨钦的解决方案当然也有效。

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

Border-Radius没有正确对齐

3 个答案: