html - 带边框的圆看起来不圆，锯齿状，不光滑，为什么？

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; 但这是错误的，你正在使用 4px 的边框，您忘记将其添加到元素的框大小(如果您了解 CSS 框模型的实际工作原理)。 p>

所以你应该使用 border-radius: 54px; 因为你的总元素的 height 和 width 总和为 108px 计算两侧的边界。

Demo

---

在这种情况下最好使用 50%

Demo

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

---

如果你想坚持使用 50px 测量值，那么你可以使用 box-sizing: border-box;

改变盒子模型渲染

box-sizing: border-box;

Demo (改变盒子模型)