带边框的圆圈看起来不圆形,锯齿状而且不光滑,为什么？

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;,但是这是错误的,你正在使用border的4px,你忘记添加到您的元件盒大小(如果你知道如何CSS的盒模型真正起作用).

所以你应该使用border-radius: 54px;而不是你的总元素height和width总和108px计算两边的边界.

演示

如果你50%在这种情况下使用它会更好

演示

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

如果您想坚持50px测量,那么您可以使用改变框模型渲染box-sizing: border-box;

box-sizing: border-box;

演示 (改装盒型号)

Answer 2

您应该使用border-radius作为百分比，如下所示：

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