Question

我有一个灰色圆圈的PNG（1024 x 1024分辨率）。我使用<img src="circle.png"/>

添加它

然而，当我使用CSS设置高度低于10px的高度时，它变得非常阻止。就像10px是一个完美的圆圈一样，9px是一个看似曾经发生过车祸的圆圈。

任何人都可以解释为什么会发生这种情况，如何让它变得更小而它仍然是一个很好的圆形圆圈？

提前致谢！

Answer 1

因为10px以下的任何一个都会使该圆圈的比例低于1％且非常小的像素，所以浏览器会提供一个近似值，但它不知道你是否有一个圆或什么，因此近似可能有点奇怪。

将像素视为可以分割的原子。不过，你要求分割它，所以浏览器＆＃34;认为＆＃34;

＆＃34;嘿，我不能这样做，但我会尽我所能＆＃34;

，因此它尽可能地放置像素，但你的0.023px和0.075px的尺寸显然会随机分散

尝试使用SVG来获得更好的渲染效果或者接近所需尺寸的图像，或者只使用CSS，简单的border-radius:50%就可以了

Answer 2

如何用 CSS 制作圆圈：

<强> DEMO

HTML：

<div></div>

CSS：

div{
    background:grey;
    border-radius:50%;
    width:9px;
    height:9px;
}