Html 完全相同的线性渐变线看起来不同

为什么是这样？

代码笔示例：

问题更多的是为什么相同的线条不同，而不是比例

css:

如果我做高度：0.8px；正常PC比例为100%时，某些线条将消失

默认情况下，p.S.笔记本电脑的比例为125%：

在我的电脑（带有视网膜显示器的MacBook）上，只要我将浏览器的缩放比例设置为100%，它看起来就可以了。视网膜比例为200%。因此，这些线正好有2个物理像素高，并且正好适合它们

当我修改浏览器缩放时，我会得到与您类似的结果。不，线条高1.8像素（比例为90%），间距为37.8像素，不再适合物理像素的网格

---

因此，当您接近屏幕分辨率时，您看到的是一种难以避免的锯齿效应。你必须找到一种不同的设计，例如使用更宽的线条和更浅的颜色。

适合我（Chrome/OSX）。您正在测试哪个浏览器和操作系统？chrome。记事本。windows 10缩放125%（standart notebok缩放）只要缩放，你就会看到问题不缩放，然后你可以通过元标记设置初始缩放来防止它。但是为什么它们彼此不同呢？它们应该是小的或大的。它们是不同的，因为对于某些线条来说，“逻辑”像素正好落在物理像素上，但是在其他线条上，它们跨越两行物理像素，所以它们会得到抗锯齿。您可以对设备像素比率进行媒体查询，并相应地调整hr的像素高度。@Thomas Peri您可以举例说明如何执行此操作吗？不幸的是，我没有解决您具体问题的有效方法。事实上，由于缩放级别可以是任意用户分配的数字，而不是已知设备中的常见比率列表，因此CSS媒体查询不会有任何帮助。使用JavaScript查看浏览器中

window.devicePixelRatio

的值。如果其值根据设置的缩放而变化，则可以除以该数字来计算所需的像素高度。但是，它可能不起作用：

.hr{
  width: 100%;
  margin:10px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 65%), rgba(0, 0, 0, 0));
  border: 0;
  height: 1px;
  padding: 0;
  font-size: 16px;
   display: inline-block;
 }