css - 边界半径 : 50% not producing perfect circles in Chrome

Question

通常 border-radius: 50% 适用于大多数应用程序，并且 Chrome 会生成看起来像圆圈的内容。但在这种情况下，我试图连续快速旋转一个圆圈，这就是问题所在。

这是 Chrome 的 border-radius 的错误吗？或者这与转换有关？

任何人都可以建议解决方法吗？

编辑:删除了过时的示例链接

Answer 1

这是由计算“半径”的方式四舍五入造成的。由于大小是偶数，因此边框在两个像素“之间”……历史悠久，最后:

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

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