带有普通HTML和CSS的不相等圆

我用简单的HTML和CSS创建了一堆圆圈，但在我看来，并不是所有圆圈都是相等的。老实说，在我看来，有些更像椭圆。我的视力有什么问题吗？或者我没有意识到布朗的缺陷

下面是我用来重现问题的代码，以及结果的图像（Chrome用于此）

正文{
背景色：白烟；
框大小：边框框；
}
.圆圈{
位置：相对位置；
显示：内联块；
宽度：14px；
高度：14px；
利润率：10px；
边界半径：7px；
背景颜色：棕色；
过渡：150ms边界线性；
光标：指针；
}
.圆圈：：之后{
位置：绝对位置；
顶部：-6px；
左-6px；
宽度：24px；
高度：24px；
背景色：透明；
边界半径：12px；
边框：1px固体白烟；
过渡：150ms全线性；
内容：''；
}
.circle:hover:：after{
边框颜色：棕色；
}

---

我将

边框半径

更改为50%，似乎已经解决了Chrome上的问题

正文{
背景色：白烟；
框大小：边框框；
}
.圆圈1{
位置：相对位置；
显示：内联块；
宽度：14px；
高度：14px；
利润率：10px；
边界半径：7px；
背景颜色：棕色；
过渡：150ms边界线性；
光标：指针；
}
.circle1：：之后{
位置：绝对位置；
顶部：-6px；
左-6px；
宽度：24px；
高度：24px；
背景色：透明；
边界半径：12px；
边框：1px固体白烟；
过渡：150ms全线性；
内容：''；
}
.circle1:悬停：：之后{
边框颜色：棕色；
}
.圆圈2{
位置：相对位置；
显示：内联块；
宽度：14px；
高度：14px；
利润率：10px；
边界半径：50%；
背景颜色：绿色；
过渡：150ms边界线性；
光标：指针；
}
.圆圈2：：之后{
位置：绝对位置；
顶部：-6px；
左-6px；
宽度：24px；
高度：24px；
背景色：透明；
边界半径：50%；
边框：1px固体白烟；
过渡：150ms全线性；
内容：''；
}
.circle2:悬停：：之后{
边框颜色：绿色；
}

原件：



固定：

我认为这与浏览器有关，但当仔细观察时，几乎看不到这个问题

border-radius=50%; 

---

应该做这项工作

有一个非常有用的技巧，可以仅使用CSS创建相等的圆和正方形。 您可以设置

高度：0

，并通过将

宽度

和

填充底部

设置为相同的尺寸，创建一个正方形，如果使用百分比而不是像素，则该正方形也会响应。若要创建圆，请添加

边界半径：100%

，然后设置

.circle{
显示：内联块；
宽度：50px；
填充底部：50px；
身高：0；
边界半径：100%；
背景颜色：蓝色；
}
身体{
背景色：白烟；
框大小：边框框；
}
.圆圈{
位置：相对位置；
显示：内联块；
宽度：14px；
填充底部：14px；
身高：0；
边界半径：100%；
利润率：10px；
背景颜色：棕色；
过渡：150ms边界线性；
光标：指针；
}
.圆圈：：之后{
位置：绝对位置；
顶部：-6px；
左-6px；
宽度：24px；
高度：24px；
背景色：透明；
边界半径：12px；
边框：1px固体白烟；
过渡：150ms全线性；
内容：''；
}
.circle:hover:：after{
边框颜色：棕色；
}

---

您的问题可能是由缩放浏览器引起的。尝试在chrome中重置缩放设置-

ctrl+0

如果你真的想让你的圆在放大时也能看得到，你可以使用缩放。通常，渲染项越大，圆显示得越平滑。您可以创建一个大小加倍的圆，然后将其缩小：

正文{
背景色：白烟；
框大小：边框框；
}
.圆圈{
位置：相对位置；
显示：内联块；
宽度：14px；
高度：14px；
利润率：10px；
光标：指针；
}
.圆圈：：之前{
位置：绝对位置；
排名：0；
左：0；
宽度：28px；
高度：28px；
边界半径：50%；
背景：棕色；
变换：比例（0.5）；
内容：''；
}
.圆圈：：之后{
位置：绝对位置；
顶部：1px；
左：1px；
宽度：24px；
高度：24px；
背景色：透明；
边界半径：50%；
边框：1px固体白烟；
过渡：150ms全线性；
内容：''；
}
.circle:hover:：after{
边框颜色：棕色；
}

---

这可能是一种更简单、更准确的方法

.circle{
背景：棕色；
宽度：3rem；
高度：3雷姆；
边界半径：50%；
显示：内联块；
保证金：2rem；
位置：相对位置；
}
.圆圈：：之后{
内容：''；
边框：3倍纯色棕色；
宽度：150%；
身高：150%；
边界半径：50%；
显示：块；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}

如果你想要完美的圆设置

边界半径：50%instead@Brian这对我来说没有任何改变。你用的是哪个浏览器？它太小了，不可能真正存在和可见，对我来说，它看起来像是一种错觉（在
白烟背景上有一个
白烟
圆圈有什么意义？@MisterJojo在我使用它的项目中，它对我来说非常可见。在浏览器中重置缩放-在chromeWell中按ctrl+0，那一定是与浏览器相关的东西，因为这并不能解决我的问题。你使用的是什么浏览器？Google Chrome v84.0.4147.125我在chromebook上，它在我的计算机上看起来像一个圆圈。在Firefox上看起来也很正常。