圆与边框看起来不圆，锯齿和不光滑，为什么？ [英] Circle with border looks not circular, jagged and not smooth, why?

问题描述

为什么我的css圆不光滑？

why is my css circle not smooth?

如果我做一个HTML5 Canvas，它真的很好。

If i do a HTML5 Canvas its really nice.

<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

Using Chrome and latest IE

推荐答案

因为你认为你使用 50％ 但是你不是，你已经使用 border-radius：50px; 但是错了，你使用 / code>的 4px ，你忘了添加到你的元素的大小调整（如果你知道CSS盒子模型真的如何工作）

Because you think you are using 50% but you aren't, you have used border-radius: 50px; but that's wrong, you are using border of 4px which you forgot to add to the box sizing of your element (If you are aware of how box model of CSS really works).

所以你应该使用 border-radius：54px; code> height 和 width 总计为 108px 侧面。

So you should be using border-radius: 54px; instead cuz your total element's height and width sums up to 108px counting border on both the sides.

演示

如果使用 50％在这种情况下

演示

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

---

与 50px 测量，你可以改变框模型渲染通过使用 box-sizing：border-box; / p>

---

If you want to stick with the 50px measurement, than you can alter the box model rendering by using box-sizing: border-box;

box-sizing: border-box;

演示 （改变框模型）

Demo (Altered Box Model)

这篇关于圆与边框看起来不圆，锯齿和不光滑，为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！