css - 使用 CSS 线性渐变生成纯色(不是平滑颜色)

Question

假设我的线性 CSS 渐变看起来像这样:

背景:线性渐变(向右，红色 0%，绿色 20%，蓝色 40%，紫色 60%，黄色 80%，黑色 100%)

它将生成如下所示的 CSS 渐变:

如何制作相同的渐变但使用纯色而不在颜色之间进行过渡？ (使用 CSS)

类似的东西:

谢谢

Answer 1

像这样

.gradient {
  width: 500px;
  height: 200px;
  background: linear-gradient(to right, 
      red    20%, 
      green  20%, 
      green  40%, 
      blue   40%, 
      blue   60%, 
      purple 60%, 
      purple 80%, 
      yellow 80%,
      yellow 100%
  );
}

<div class="gradient"></div>