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

Question

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

看看这个codepen,看看我在说什么.注意外缘是如何摆动的？

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

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

任何人都可以提出建议吗？

Answer 1

这是由“半径”计算方式的舍入引起的。由于大小是偶数，因此边框位于两个像素“之间”......悠久的历史，最后：

解决方法：将 div 圆圈大小设置为“奇数”像素。

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