Css 在Chrome中缩放边界半径50%的类不会'；不产生一个完美的圆

我有多个由以下CSS生成的圆：

。映射圆{
位置：绝对位置；
光标：指针；
边界半径：50%；
宽度：5px；
高度：5px；
z指数：999；
背景色：红色；
}

由于某些原因，当我将该圆圈缩放到较大的数字时，该圆圈在Chrome中并不完美：

。映射圆{
变换：矩阵（10,0,0,10,0,0）；
}

。映射圆{
位置：绝对位置；
左：50px；
顶部：50px；
光标：指针；
边界半径：50%；
宽度：5px；
高度：5px；
z指数：999；
背景色：红色；
变换：矩阵（10,0,0,10,0,0）；
}

---

不确定这是否是chrome的问题。但当我使用上面的代码时，宽度和高度都是偶数（比如4px或6px），它工作得很好，但对于5px这样的奇数宽度，它就失败了

这似乎是因为Chrome渲染圆的距离有多近。如果你放大圆圈（我试了50像素），它显示了一个完整的圆圈。显然，对于某些非常小的尺寸，Chrome不会尽力渲染边界圆角

---

如果您想解决这个问题，SVG可能是一个不错的选择。Chrome应该不会有任何问题，正确地渲染这个

边界半径：9999em；我应该做这个把戏。。。遗憾的是，他没有做到这一点：在这里仍然看到同样的情况。事实上，我刚刚在我的帖子中添加了一个屏幕截图，上面是我在你的Fiddle中看到的有趣的事实：如果你使用ems，它似乎可以工作……事实上SVG可能是一种方式——在这种情况下，它不是一个选项：/这太奇怪了。使用5px时，它的行为很奇怪，但当更改为4px时，圆圈就可以了。这个给我修好了