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