linear-gradient 制作分段彩条为什么连接处会虚

Question

想做分段彩条效果，但是每段连接处是虚的，如何消除呢？有没有办法避免？

.top {

height: 28px;
background-image:
  linear-gradient(
      to right,
      $red1,
      $red1 20%,
      $yellow1 20%,
      $yellow1 40%,
      $blue1 40%,
      $blue1 60%,
      $purple1 60%,
      $purple1 80%,
      $brown1 80%,
      $brown1 100%,);
      }

Answer 1

.liner {
  height: 66px;
  background-repeat: no-repeat;
  background-size: 20% 100%, 40% 100%, 60% 100%, 80% 100%, 100% 100%;
  background-position: 0 bottom;
  background-image:
    linear-gradient(#000,#000),
    linear-gradient(green, green),
    linear-gradient(pink, pink),
    linear-gradient(yellow, yellow),
    linear-gradient(orange, orange);
}

我试了也是须的（估计是chrome bug），所以换了个路子，这样就可以了

参考链接