鍍金池/ 問答/HTML/ linear-gradient 制作分段彩條為什么連接處會虛

linear-gradient 制作分段彩條為什么連接處會虛

想做分段彩條效果，但是每段連接處是虛的，如何消除呢？有沒有辦法避免？
clipboard.png
.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%,);
      }
回答
編輯回答
毀了心
.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），所以換了個路子，這樣就可以了

參考鏈接

2018年4月4日 13:02