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），所以换了个路子，这样就可以了