1

我正在尝试创建一个带圆角的 div。在这个 div 里面包含额外的内容，这些内容将填满这个 div 的高度。我注意到圆形 div 的每个角落都有一些视觉损坏。在我看来，外部 div 的角落比内部 div 稍大。根据我的代码，两个 div 的边界半径应该相同。

问题示例：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; }
4

3 回答 3

1

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

div.aa { 背景：红色；边框半径：10px；宽度：400px；} div.ab { 背景：水色；边框半径：10px；高度：200px；}

div.ba { 背景：红色；边框半径：10px；宽度：400px；溢出：隐藏；} div.bb { 背景：水色；边框半径：10px；宽度：400px；高度：200 像素；}

jsfiddle.net/MRZaF/5/

于 2013-05-15T00:39:43.590 回答
1

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

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

第二个选项：从父元素中删除边框半径并将其用于子元素并将背景设置为无。

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

JS 小提琴演示

于 2013-05-15T01:10:37.450 回答
1

注意：比有趣问题的答案和 +1 更多的额外错误跟踪

是的，你是对的。有某种最小的损坏，至少当您在浏览器中以 100% 缩放级别查看它时非常明显。但是，放大得越多，错误就越小；以 500% 为像素的 1/10。您的 css 是正确的，所以我认为这一定是浏览器渲染问题。不过，我没有立即在 chrome 错误列表https://code.google.com/p/chromium/issues/list中找到任何关于它的问题。

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

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

于 2013-05-15T01:16:27.280 回答