css – Border-radius：50％没有在Chrome中生成完美的圆圈

通常border-radius：50％适用于大多数应用程序,Chrome可以生成看起来像圆形的东西.但在这种情况下,我试图不断地快速旋转一个圆圈,这就是这个问题出现的地方.

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

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

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

有人可以推荐一个解决方案吗？

解决方法

这是由计算“半径”的方式的舍入引起的.由于大小是偶数,边界是“中间”两个像素……长历史,最后：

Workarround：将div的圆圈大小设置为“奇数”像素数.

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

原文地址：https://www.jb51.cc/css/215092.html