圆小于10像素

时间:2014-09-11 18:14:40

标签: html css

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

添加它

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

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

提前致谢!

2 个答案:

答案 0 :(得分:2)

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

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

  

&#34;嘿,我不能这样做,但我会尽我所能&#34;

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

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

答案 1 :(得分:1)

如何用 CSS 制作圆圈:

<强> DEMO

HTML:

<div></div>

CSS:

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