我有一个灰色圆圈的PNG(1024 x 1024分辨率)。
我使用<img src="circle.png"/>
然而,当我使用CSS设置高度低于10px的高度时,它变得非常阻止。就像10px是一个完美的圆圈一样,9px是一个看似曾经发生过车祸的圆圈。
任何人都可以解释为什么会发生这种情况,如何让它变得更小而它仍然是一个很好的圆形圆圈?
提前致谢!
答案 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;
}