Css 为什么在firefox中，锐利的渐变过渡会导致模糊？

这是我面临的问题：ChromeFirefox

我觉得应该有一种方法可以通过渐变来创建清晰的过渡，而且是有的。通过放置两个相隔几个像素的双色节点，然后在与第二个双色节点相同的像素上放置一个唯一的颜色节点，可以创建一个清晰的颜色过渡

但我通常使用Firefox，而不是chrome。在很长的一段时间里，我一直认为我的方法是不可靠的，因为它实际上只在五个像素的间隔内工作。所以这是非常不可靠的。但最近我发现，铬是当场。因此，我整理了一个测试片段，我将在下面向您展示它，精确地演示该行为

有人能告诉我为什么会发生这种行为，我能做些什么吗

.demo{
背景色：黑色；
显示：内联块；
字体系列：arial；
字体大小：32px；
线高：42px；
文本对齐：居中；
}
.演示：之后{
内容：“酥脆”；
颜色：白色；
}
.一{
背景图像：线性渐变（黑色1px，透明1px），线性渐变（90度，红色42px，#0F0 42px，#0F0 84px，蓝色84px）；
高度：42px；宽度：126px；
}
.二{
背景图像：线性渐变（黑色2px，透明2px），线性渐变（90度，红色42px，#0F0 42px，#0F0 84px，蓝色84px）；
高度：42px；宽度：126px；
}
.三{
背景图像：线性渐变（黑色3px，透明3px），线性渐变（90度，红色42px，#0F0 42px，#0F0 84px，蓝色84px）；
高度：42px；宽度：126px；
}
.4{
背景图像：线性渐变（黑色4px，透明4px），线性渐变（90度，红色42px，#0F0 42px，#0F0 84px，蓝色84px）；
高度：42px；宽度：126px；
}
.5{
背景图像：线性渐变（黑色5px，透明5px），线性渐变（90度，红色42px，#0F0 42px，#0F0 84px，蓝色84px）；
高度：42px；宽度：126px；
}
.6{
背景图像：线性渐变（黑色6px，透明6px），线性渐变（90度，红色42px，#0F0 42px，#0F0 84px，蓝色84px）；
高度：42px；宽度：126px；
}

您看到的（除非您遇到与我相同的问题）：



我所看到的：




不过，不要让奇偶模式愚弄你。。。不同的测试运行产生了以下结果：

我很困惑，（悬停时缩放x 12）。在chrome、FF、opera等浏览器/操作系统中，我觉得它看起来很犀利，也就是说，你对特定的浏览器/操作系统有问题吗？实际上我还没想过要检查一下。等一下，我会回来的。好的，我刚试过使用chrome，非常正确，它看起来确实很锋利。。。让我们看看我使用的是Windows1064位和Firefox44.0.2，我的缩放比例是100%。我使用默认值按钮将其捕捉回那里只是为了确定。我还应该检查什么？你说的是哪个梯度？黑色的还是彩色的？如果是黑色的，你能告诉我们你用来制作那张照片的确切代码吗？其中似乎有两层（从上到下）。在我提供的图的第一、第二、第三、第四和第六个面板中，黑色到透明的渐变明显存在问题。第五个面板包含黑色到透明渐变的唯一清晰过渡，可能是因为节点已在间隔5的时间内停止。红色、绿色和蓝色渐变的间隔为5。如果不这样做，很可能还会产生模糊过渡。