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

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

.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 ></div>

总结

以上是内存溢出为你收集整理的html – Scaled容器不会保持圆形(border-radius：50％)？全部内容，希望文章能够帮你解决html – Scaled容器不会保持圆形(border-radius：50％)？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。