CSS线性渐变显示错误的颜色

Question

我试图创建一个简单的地平线条纹背景使用线性渐变和背景大小，第一种颜色正确显示，但第二种颜色＃58a 显示 1px叠加遮罩

HTML：

<div></div>

CSS：

div {
    height: 100px;
    background: linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
}

检查此链接中的结果：https://codepen.io/migcoder/pen/BpOGdL

您可能必须放大浏览器才能看到 1px叠加遮罩清除。

奇怪的是，如果我将第二种颜色更改为蓝色或红色（可能更多其他颜色），问题就会消失。

我在Chrome，Firefox和Edge中对此进行了测试，它们都有相同的问题，这是一个错误吗？

Answer 1

body {margin:0}“有效”，因为它会移除左侧的白色像素。 Lemme深入下潜 -

显示器中的每个像素都是使用红色，绿色，蓝色的垂直LED段构建的。红色+绿色表示黄色但仅填充第一个像素段，而蓝色只填充最后一个。

在插图中更容易看到 -

这表示物理屏幕上的单个像素。质量和物理分离取决于电池的质量以及屏幕的物理尺寸和分辨率。质量越低和/或分辨率越低，细胞出现的程度越大 - 眼镜等光学影响也会影响细胞如何通过色差和一般失真等感知细胞。

旁边的白色细胞可以通过增加对比度来放大效果。去除边距使得彩色区域接近深色会降低效果。所以基本上，这是一种光学现象（我想你可以称之为幻觉，但是，由于像素单元的构建方式，屏幕上存在真正的物理分离）。

您可以通过仅使用红色和蓝色来进一步放大效果（结果当然取决于显示器等等）：

div {
  height: 100px;
  background: linear-gradient(#f00 0, #f00 50px, #00f 0px, #00f 100px);
}

<div></div>

如果我们现在仔细查看显示上述代码结果的实际物理屏幕：

我们可以更清楚地看到分离（图像不是最好的，但希望足够好以说明;两条线用红色，两条用蓝色）：

左边的像素当然是白色，并且由于对比度的原因，它旁边的未点亮部分（在这种情况下是蓝色部分）会更加明显，因此会增加效果。

Answer 2

您的屏幕截图没有任何1px覆盖遮罩。这是您自己图片的放大版本：

我很确定这只是一种视错觉。

Answer 3

为导航器添加前缀

div {
  height: 100px;
  background: -webkit-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: -o-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: -moz-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
}