CSS 具有多个停止点和边界的渐变

Question

我想制作一个 css 相当于下图。我正在使用多个停靠点，但很难获得硬停靠点 solid 2px white 边界。如果我添加它，它看起来像是一个渐变而不是硬边。任何帮助都会很棒，谢谢！

.stripes {
  max-width: 800px;
  height: 100px;
  background-image: linear-gradient(to right, #3f2919 0%, #3f2919 6%, #ffffff 6%, #ffffff 7%, #68adc6 7%, #68adc6 20%, #875e3b 20%, #875e3b 40%, #86979b 40%, #86979b 45%, #83a450 45%, #83a450 70%, #75753a 70%);
}

<div class="stripes"></div>

Answer 1

这很可能是由于百分比单位以及浏览器和操作系统的处理方式（舍入与抗锯齿等）所致。如果你真的只想要 2px 的白色细条纹，在渐变中使用严格的像素值可能会更好。

Answer 2

您可以使用 calc() 将白色也插入到渐变颜色中：

.stripes {
  height: 100px;
  background-image: linear-gradient(to right, 
    #3f2919 0%, #3f2919 6%, 
    #ffffff  calc(6%  + 2px), #68adc6  calc(6% +  2px), #68adc6 20%, 
    #ffffff  calc(20% + 2px), #875e3b  calc(20% + 2px), #875e3b 40%,     
    #ffffff  calc(40% + 2px), #86979b  calc(40% + 2px), #86979b 45%,
    #ffffff  calc(45% + 2px), #83a450  calc(45% + 2px), #83a450 70%, 
    #ffffff  calc(70% + 2px), #75753a  calc(70% + 2px), #75753a );
}
}

<div class="stripes"></div>

让它更清晰

.stripes {
  height: 100px;
  background-image: linear-gradient(to right, 
    #3f2919 0%, #3f2919 6%, 
    #ffffff  6%,#ffffff  calc(6%  + 2px), #68adc6  calc(6% +  2px), #68adc6 20%, 
    #ffffff 20%,#ffffff  calc(20% + 2px), #875e3b  calc(20% + 2px), #875e3b 40%,     
    #ffffff 40%,#ffffff  calc(40% + 2px), #86979b  calc(40% + 2px), #86979b 45%,
    #ffffff 45%,#ffffff  calc(45% + 2px), #83a450  calc(45% + 2px), #83a450 70%, 
    #ffffff 70%,#ffffff  calc(70% + 2px), #75753a  calc(70% + 2px), #75753a );
}
}

<div class="stripes"></div>

来自 chrome 的观点：

CSS 具有多个停止点和边界的渐变

CSS gradients with multiple stops and borders

css

css-gradients