css 边界半径：50%的人在Chrome中无法生成正圆

5gfr0r5j 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(164)

通常border-radius: 50%在大多数应用程序中都能正常工作，Chrome会产生看起来像圆的东西。但在这个例子中，我试图不断快速旋转一个圆，这就是这个问题表现出来的地方。
这是Chrome的边框半径的问题吗？还是变形的问题？
有谁能建议一个变通办法吗？
编辑：删除过时的示例链接

2条答案

这是由于计算“半径”的方式中的圆化造成的。由于大小是偶数，因此边界位于两个像素之间...历史悠久，最后：

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

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

截至2022年12月，我们有一个有效的解决方案：兼容所有主流浏览器...
如果border-radius值是该特定元素的宽度值的一半;在CSS中，我们会得到一个完整的圆，如果一个height属性与width或aspect-ratio属性的值相等，为该元素指定。

img {
  width: 150px;
  border-radius: 75px;
  aspect-ratio: 1 / 1;
}

或

img {
  width: 150px;
  height: 150px;
  border-radius: 75px;
}

额外注意：为了动态缩放width和height以用于动态CSS的单位，aspect-ratio属性可以提供帮助。