html – Scaled容器不会保持圆形(border-radius：50％)？

发布时间：2020-12-14 18:40:44 所属栏目：资源来源：网络整理

导读：我有一个简单的圆形容器： .foo { width: 5px; height: 5px; background-color: green; border-radius: 50%;} 当我尝试使用以下方法扩展其大小时： .foo { -webkit-transform: scale(10,10); transform: scale(10,10);} 它看起来不再那么圆了.看起来它的bord

我有一个简单的圆形容器：

.foo {
  width: 5px;
  height: 5px;
  background-color: green;
  border-radius: 50%;
}

当我尝试使用以下方法扩展其大小时：

.foo {
  -webkit-transform: scale(10,10);
          transform: scale(10,10);
}

它看起来不再那么圆了.看起来它的border-radius得到一个等于原始边界半径的值,以像素为单位乘以比例值.

https://jsfiddle.net/h70wsqrv/1/

任何想法如何解决它？

更新：似乎问题只发生在Chrome中. Firefox显示了一个完美的圆圈.

解决方法

奇怪,但是如果你将宽度和高度设置为6px或任何偶数,它都有效.

当奇数是奇数时,Chrome中的半径计算错误.

.foo {
  margin: 100px;
  width: 6px;
  height: 6px;
  background-color: green;
  border-radius: 50%;
  -webkit-transform: scale(15,15);
  transform: scale(15,15);
}

<div class="foo">
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!