缩放容器不会保持圆形（边框

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

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

当我尝试通过以下方式缩放其大小时：

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

它再也看不到这一轮了。 似乎它的边界半径获得的值等于原始边界半径（以像素为单位）乘以比例值。

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>

链接地址: http://www.djcxy.com/p/89203.html

上一篇: Scaled container won't keep round shape (border

下一篇: How to implement Continuous Delivery with DNX and ASP.NET 5