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计算两边的边界。

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 （Altered Box Model）

Answer 2

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

    -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

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

3 个答案: