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

前端之家收集整理的这篇文章主要介绍了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;

猜你在找的CSS相关文章