Html 带边框的圆形看起来不圆，锯齿状且不光滑，为什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21464405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Circle with border looks not circular, jagged and not smooth, why?
提问by Pinch
why is my css circle not smooth?
为什么我的 css 圆圈不平滑？
If i do a HTML5 Canvas its really nice.
如果我做一个 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>
Using Chrome and latest IE
使用 Chrome 和最新的 IE
Notice the extreme top bottom right left points appear flat.
请注意，左上右下的极端点显得平坦。
回答by Mr. Alien
Because you think you are using 50%but you aren't, you have used border-radius: 50px;but that's wrong, you are using borderof 4pxwhich you forgot to add to the box sizing of your element (If you are aware of how box model of CSS really works).
因为你认为你正在使用50%，但你不是，你用border-radius: 50px;，但是这是错误的，你正在使用border的4px，你忘记添加到您的元件盒大小（如果你知道如何CSS的盒模型真正起作用）。
So you should be using border-radius: 54px;instead cuz your total element's heightand widthsums up to 108pxcounting border on both the sides.
所以你应该使用border-radius: 54px;因为你的总元素height和width总和来108px计算两边的边界。
It is better if you use 50%in such cases
如果你50%在这种情况下使用会更好
#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
border:4px solid blue;
}
If you want to stick with the 50pxmeasurement, than you can alter the box model rendering by using box-sizing: border-box;
如果您想坚持50px测量，则可以使用以下方法更改盒模型渲染box-sizing: border-box;
box-sizing: border-box;
Demo(Altered Box Model)
演示（改变的盒子模型）
回答by BenPog
You should use border-radius as a percentage, like this :
您应该使用 border-radius 作为百分比，如下所示：
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
回答by Joeytje50
For a circle shape using CSS, you should specify the same width as height (like you did), but you should always use 50%on your border radius. This is because when specifying a width and height, it will not be including the padding and border widths. This means that on either side of your div there's 4px of border, which is slightly stretching out your div.
对于使用 CSS 的圆形，您应该指定与高度相同的宽度（就像您所做的那样），但您应该始终50%在边框半径上使用。这是因为在指定宽度和高度时，它将不包括填充和边框宽度。这意味着在你的 div 的两侧都有 4px 的边框，这会稍微拉长你的 div。
Also, you can remove the browser prefixes such as -webkit-and -moz-. Chrome 4 and Firefox 3.6 are the last versions to need these prefixesand those really lack any browser usage share at all.
此外，您可以删除浏览器前缀，例如-webkit-和-moz-。镀铬4和Firefox 3.6都需要这些前缀的最后一个版本和那些真正没有任何浏览器使用份额在所有。
Your final code would look like this:
您的最终代码如下所示：
#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
border:4px solid blue;
}
