具有多个停止和边框的 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

您也可以使用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 查看：

Answer 2

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