CSS小圆变成椭圆答案

【问题标题】：CSS small circle becomes ovalCSS小圆变成椭圆
【发布时间】：2021-11-03 19:46:57
【问题描述】：

我使用小圆圈作为轮播指示器，但我遇到了一个非常奇怪的问题。最小的圆圈变成椭圆形，但如果我放大，它又会变成一个圆圈。

const circles = document.querySelectorAll('.circle');
circles.forEach(circle => {
  circle.addEventListener('click', (event) => {
    circles.forEach(circle => {
      circle.classList.remove('active')
    })
    circle.classList.add('active')
  })
})

.wrapper {
  width: 300px;
  height: 20px;
  display: flex;
  align-items: center;
  padding: 100px;
}

.circle {
  width: 8px;
  height: 8px;
  margin: 3px;
  border-radius: 50%; 
  border: 1px solid black;
  cursor: pointer;
  transition: all 0.3s;
}

.circle:first-child, .circle:last-child{
  width: 4px;
  height: 4px;
}

.circle:nth-child(2), .circle:nth-child(4){
  width: 6px;
  height: 6px;
}

.circle:hover {
  background-color: gray;
}

.circle.active {
  width: 36px;
  border-radius: 3px;
  background-color: #131417;
  height: 4px;
}

<div class="wrapper">
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div> 
</div>

尝试单击不同的圆圈，当您单击倒数第二个项目时，您会注意到最后一个变为椭圆形。（如果你不能复制这个，你必须在小屏幕上查看它，所以试着缩小）

如果我尝试为这些圆圈使用更大的尺寸，一切似乎都很完美。

我尝试使用 SVG 而不是 CSS 圆圈，但结果是一样的。谁能猜出为什么会这样？

【问题讨论】：

您使用的是哪个浏览器？无论窗口大小如何，都可以在最新版本的 Firefox 和 Chrome 中完美运行。
我唯一的建议是向“.circle”添加另一个属性“box-sizing:border-box”。也许这会有所帮助。
我无法在 Chrome/Edge Windows 10 上重现该问题。
我也使用最新的 chrome，我的同事也用车复制了这个。我在不同的 PC 和不同的浏览器上尝试过。尝试缩小。 @Azu 感谢您的建议，但这并没有帮助
当浏览器尝试在 CSS 像素和实际屏幕像素之间进行映射时，会有边缘效果。您是否尝试过使用 Unicode 圆圈来查看它们是否更好地扩展/收缩？

标签： javascript css geometry

【解决方案1】：

我试图放大图像。您会看到其他图像也不是圆圈...我想它来自浏览器渲染。

【讨论】：

那么，有没有办法解决这个问题？
我认为这是一个非常小的问题，因此您可以保持原样。
一旦你注意到这一点，它看起来很丑：D
我建议你扩大圈子。最小的只有 4px x 4px。很难点击。这只是从用户的角度来看:)
其实这些在现实中是不可点击的。有用于此目的的箭头。这些按钮只是指示器。无论如何感谢您的建议