Border-Radius沒有正確對齊

我想創建一個帶圓角的div。這個div裏面包含額外的內容，將填補這個div的高度。我注意到在圓角div的每個角落都有一些視覺腐敗。在我看來，外部div的角落比內部div大得多。根據我的代碼，兩個divs的邊界半徑應該是相同的。問題的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; }

來源

2013-05-15 Jon

有幾個選項來做到這一點的。
首先選擇：稍微增加父容器的邊界半徑

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

第二個選項：從父元素中取出邊界半徑，只是使用它的子元素和設置背景無。

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

JS Fiddle Demo

來源

2013-05-15 01:10:37 Sachin

不要把它下把它放在頂部，你不會明白了。

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/

來源

2013-05-15 00:39:43

注：更多的一些附加誤差比答案& +1跟蹤有趣的問題

是啊，你說得對。當你在瀏覽器中以100％的縮放級別查看它時，至少會看到很少的腐敗現象。但是，放大得越多，bug越小;在500％像像素的1/10。你的CSS是正確的，所以我認爲這必須是瀏覽器渲染問題。儘管如此，我並沒有立即在鉻錯誤列表https://code.google.com/p/chromium/issues/list中發現任何關於它的問題。

但是，如果您確實想要隱藏那些重疊的邊角，則仍可以通過爲子設置margin: -0.6px -0.6px;和width: parents width + margin*2來解決該問題。我不知道，也許屏幕問題以及誤差。而Sachin的解決方法當然也適用。

我更新了您的測試用例： http://jsfiddle.net/MRZaF/7/ 用一些不同的值來跟蹤誤差範圍。看起來在100％的瀏覽器視圖下，與「真實」定位的差異大約爲0.5px，然後當放大到500％時，它變得越來越窄。

來源

2013-05-15 01:16:27 Tyblitz

Border-Radius沒有正確對齊

回答

相關問題