在做一個練習(xí)時候得知一種分段彩條做法。但是實現(xiàn)后發(fā)現(xiàn)Chrome上色彩交界處有過渡漸變，不是我想要的效果。經(jīng)過高手指點，然后就有了第二種做法。

Codepen： 點擊查看線上效果

image.png

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

.bar2 {
  background-repeat: no-repeat;
  background-size: 20% 100%, 40% 100%, 60% 100%, 80% 100%, 100% 100%;
  background-image:
     linear-gradient($red1,$red1),
     linear-gradient($yellow1, $yellow1),
     linear-gradient($blue1, $blue1),
     linear-gradient($purple1, $purple1),
     linear-gradient($brown1, $brown1);
}