边框半径：50％在Chrome中不生成完美圆形 [英] Border-radius: 50% not producing perfect circles in Chrome

问题描述

通常 border-radius：50％对大多数应用程序都可以正常工作，Chrome会生成看起来像一个圆圈的内容。但在这种情况下，我想尽快不断地旋转一个圆圈，这就是这个问题显现的地方。

Usually border-radius: 50% works fine for most applications, and Chrome produces what looks like a circle. But in this instance, I am trying to continually rotate a circle quickly, and this is where this problems shows itself.

查看这个codepen看看我在说什么关于。注意外边缘是如何摆动的？

Check out this codepen to see what I'm talking about. Notice how the outer edge wobbles?

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

这是Chrome的border-radius的错误吗？还是这个东西与变换？

Is this a bug with Chrome's border-radius? Or is this something with the transform?

任何人都可以建议一个解决方案？

Can anyone suggest a work around?

推荐答案

以半径的方式计算舍入。由于大小是偶数，所以边界是中间两个像素...历史长，结束时：

It's caused by the roundings in the way the "radius" is calculated. Since the size is an even number the border is "in-between" two pixels... long history, at the end:

Workarround：将您的divs圆圈大小设为奇数像素。

Workarround: Set your divs circles size an "odd" number of pixels.

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

这篇关于边框半径：50％在Chrome中不生成完美圆形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！