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