边框半径和浏览器缩放

Posted 2023-03-28

【中文标题】边框半径和浏览器缩放

【英文标题】：Border Radius and Browser Zoom

【发布时间】：2021-12-02 06:50:08

【问题描述】：

试图找出与浏览器缩放相关的 css 边框半径的一个非常奇怪的问题。正如您在下面的 gif 中看到的，只要元素的位置发生变化，边框半径就会发生变化。

奇怪的是，只有当我放大到 125% 时才会发生这种情况。如果有帮助的话，我会在 MacBook 上使用 Chrome。这是一个简单的CodePen，它为我复制了这个问题。

<span></span>

<style>
span 
  display: block;
  margin-left: 60px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: blue;

</style>

任何帮助将不胜感激！

【参考方案1】：

问题是您被缩放到 125%，而 Chrome 遇到了所谓的“小数像素”问题。本文深入探讨了该主题：https://www.simonbattersby.com/blog/browsers-and-fractional-pixels/，但一个很好的标注是：

在这种情况下，Firefox 和 IE8 将 div 宽度四舍五入到最接近的整数 像素，所有其他测试的浏览器只使用整数值。

在 1x 显示器（其中每个像素直接与单个 RGB 光源相关）上，浏览器可以将像素显示为蓝色圆圈“ON”的一部分或不显示蓝色圆圈“OFF”的一部分。看起来您正在视频中展示 1x 显示器演示。

当小数像素 0.5。 2x 显示器可以显示更大的密度，因此这种情况不太常见。

这个问题永远不会消失，当您在浏览器中放大或缩小时，您将继续看到这种行为。呈现是非典型的和倾斜的，因为您的用户选择了以这种方式查看它，但对于使用正常缩放的任何其他用户 - 它会按预期显示。

【讨论】：

一篇有趣但旧的文章。你知道有一个深入讨论现代屏幕（其中 1 个 CSS 像素可以映射到多个屏幕像素）吗？那里也可能会出现某种舍入误差 - 当要显示部分像素时，屏幕像素有时会“落后”。

哇。感谢那！使我的自定义单选按钮很难，因为它们在某些缩放级别上看起来很糟糕