使用 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
);

我需要一个带有多个色标的线性渐变，但使用 Google Chrome 会在颜色之间呈现奇怪的阴影（见左图）。我需要的效果是没有阴影的“条纹”）。

在附件中，我展示了我使用 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
    );
}