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

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

HTML:

检查此链接中的结果：

您可能需要放大浏览器以查看1px覆盖遮罩清除

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

我在Chrome、Firefox和Edge上测试过，它们都有相同的问题，这是一个bug吗

---

为导航器添加前缀

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

---

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

---

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

主体{margin:0}“有效”，因为它删除了左侧的白光像素。让我潜深一点-

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

在插图中更容易看到-

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

旁边的白光电池可以通过增加对比度来放大效果。删除边距，使彩色区域靠近深色将减少效果。因此，基本上，这是一种光学现象（我想你可以称之为错觉，然而，屏幕上有一个实际的物理分离），这是由于像素单元是如何构建的

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

div{
高度：100px；
背景：线性梯度（#f00 0，#f00 50px，#00f 0px，#00f 100px）；
}

---

也许它与操作系统、系统配置等有关，我不知道，但即使在200%的放大率下，我也看不到您在屏幕截图中突出显示的内容。我在Win7 PC上使用Chrome。Chrome和其他浏览器插入默认样式。也许这是造成差距的原因。像哈里一样，我也不明白你的确切意思。使用检查器查看发生了什么。在div css之前添加

body{margin:0}

。我也看不到您的屏幕截图中的问题。听起来像色差。你戴眼镜吗？你有没有试过在高倍率（没有平滑）下查看屏幕截图？打字错误：颜色停止应该是0、50px、50px（不是0）和100px，不是吗？我也不能重现这个问题（无论是0还是50px）简直太棒了。非常感谢你的贡献。太棒了！谢谢！

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

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