使用Chrome的CSS背景线性渐变错误？

Question

html {
  background:#ffffff;
}
body {
  height:250px;
  background: linear-gradient(
    to bottom,
    #ffffff 0px,
    #ffffff 100px,
    #0065A2 100px,
    #0065A2 145px,
    #074A8B 145px,
    #074A8B 163px,
    #0065A2 163px,
    #0065A2 203px,
    transparent 203px
  );
}

我正在尝试使用背景线性渐变，并且非常惊讶它在Firefox和IE上运行良好，但在Google Chrome上却不行。

代码就在这里：https://jsfiddle.net/be1rgpez/1/

background: linear-gradient(
    to bottom,
    #ffffff 0px,
    #ffffff 100px,
    #0065A2 100px,
    #0065A2 145px,
    #074A8B 145px,
    #074A8B 163px,
    #0065A2 163px,
    #0065A2 203px,
    transparent 203px
);

我需要一个带有多个色标的线性渐变，但是使用谷歌浏览器会在颜色之间产生一个奇怪的阴影（见图左框）。我需要的效果是“条纹”没有阴影）。

在附件中，我展示了我使用Chrome看到的内容。 左框是我需要但没有阴影（如右框中所示）。同样的jsfiddle在Firefox和IE上正确呈现。

更新：这是一张放大的照片。如您所见，左侧框在白色和蓝色之间（以及其他颜色之间）有一个小阴影。

Answer 1

试试这段代码：

.left {
    background: linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
    background: -webkit-linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
}

.right {
    background: linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
    background: -webkit-linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
}

Answer 2

我发现线性梯度和容器溢出之间存在问题。 我尝试了许多解决方案，但没有用。

然后，当我尝试提供overflow:auto时，它对我有用。

this is before i apply the fix to the right container which holds many content

this is after applying the overflow: auto !important; to the right container 并且现在可以正常工作了，就在这里。

Answer 3

您为不同的颜色定义了两次相同的起点。下面没有重复的代码看起来很好：

.left {
     background: linear-gradient(
        to bottom,
        #ffffff 0px,
        #0065A2 100px,
        #074A8B 145px,
        #0065A2 163px,
        transparent 203px
    );
}