边界半径:50%不能在Chrome中生成完美的圆圈

时间:2014-06-05 22:01:21

标签: css css3 google-chrome

通常border-radius: 50%适用于大多数应用程序,Chrome会生成看似圆圈的内容。但在这种情况下,我试图不断地快速旋转一个圆圈,这就是这个问题出现的地方。

看看这个代码栈,看看我在说什么。注意外边缘是如何摆动的?

http://codepen.io/jonshungry/pen/edmpf

这是Chrome的边界半径的错误吗?或者这是变换的东西?

有人可以推荐一个解决方法吗?

1 个答案:

答案 0 :(得分:3)

它是由" radius"的方式的舍入引起的。计算。由于大小是偶数,因此边界是"中间的"两个像素......历史悠久,最后:

Workarround :设置你的div圈数为" odd"像素数。

$ring-medium-outer: 437px;
$ring-medium-inner: 381px;