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

Question

为什么会这样？

Codepen示例： https://codepen.io/bofemptiness/pen/PxGePa?page=1&

问题更多的是为什么同一行是不同的，而不是比例。

css：

.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;
 }

如果我将高度设为0.8像素；在PC比例为100％的情况下，有些线会消失。

P.S。默认情况下，笔记本电脑缩放比例为125％：

Answer 1

在我的机器（带Retina显示屏的MacBook）上，只要我将浏览器的缩放比例设置为100％，它就可以正常运行。视网膜缩放为200％。因此，这些线将恰好是2个物理像素高并且完全适合它们。

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

因此，您所看到的是混叠效果，当您接近屏幕分辨率时很难避免。您必须找到其他设计，例如使用较宽的线条和较浅的颜色。