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