我有一个简单的圆形容器：
.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>
