具有多个停靠点和边框的CSS渐变

Question

我希望制作一张与下图相同的CSS。我正在使用多个站点，但我很难获得一个严格的solid 2px white边界。如果我添加它，看起来它是一个渐变而不是硬边。任何帮助都会很棒，谢谢！

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

Answer 2

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

＆＃13;

＆＃13;

.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 );
}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

让它更清晰

＆＃13;

＆＃13;

.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 );
}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

从chrome查看：