帶邊框的圓看起來不是圓形的，鋸齒狀的而且不光滑，爲什麼？

Question

爲什麼我的CSS圈不平滑？

如果我做了HTML5 Canvas，它真的很不錯。

<div id="circle"></div> 
    <style> 
    #circle { 
    width: 100px; 
    height: 100px; 
    background: red; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
    border:4px solid blue; 
} 
</style> 

http://jsfiddle.net/nkBp8/

使用Chrome和IE最新

公告極端頂部右下方左點出現持平。

Answer 1

因爲你認爲你正在使用50%，但你沒有，你已經使用border-radius: 50px;但這是錯的，你正在使用的4pxborder你忘記添加到您的元素的盒子大小（如果你是知道的CSS的盒子模型是如何工作的）。

所以，你應該用border-radius: 54px;，而不是你的Cuz總元素的height和width金額高達108px在雙方邊境計數。

Demo

---

這是更好，如果你在這種情況下

Demo

#circle { 
    width: 100px; 
    height: 100px; 
    background: red; 
    border-radius: 50%; 
    border:4px solid blue; 
} 

---

如果你想堅持的50px測量使用50%，比你改變盒子模型渲染通過荷蘭國際集團box-sizing: border-box;

box-sizing: border-box; 

Demo（更改後的盒狀模型）

Answer 2

您應該使用邊界半徑爲百分比，如：

-moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 

Answer 3

對於使用CSS的圓形狀，你應該指定與高度相同的寬度（就像你所做的那樣），但是你應該在你的邊框半徑上始終使用50%。這是因爲在指定寬度和高度時，它將不包括填充和邊框寬度。這意味着你的div的任何一邊都有4px的邊框，這會略微拉伸你的div。

此外，您可以刪除瀏覽器前綴，如-webkit-和-moz-。 Chrome 4和Firefox 3.6是the last versions to need these prefixes和those really lack any browser usage share at all。

你的最終代碼應該是這樣的：

#circle { 
    width: 100px; 
    height: 100px; 
    background: red; 
    border-radius: 50%; 
    border:4px solid blue; 
} 

demo