使用 CSS 线性渐变生成纯色（不是平滑颜色）

Question

假设我的线性 CSS 渐变如下所示：

background: linear-gradient(to right, red 0%, green 20%, blue 40%, purple 60%, yellow 80%, black 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>

Answer 2

渐变是通过颜色混合创建的。 您可以通过指定每种颜色的范围来控制颜色的混合效果，如下面的示例

.flag

：

• 颜色

  #00ae00

  将应用到

  33.3%

  的

  div

  。
• 从那时起直到

  66.6%

  ，将应用

  white

  。
• 最后

  orange

  将从

  66.6%

  开始直到盒子的末尾。

这样您就可以添加任意数量的颜色。

但请记住一件事，当度数是直的时看起来很好，如果改变角度，在某些情况下颜色边缘可能看起来不平滑（取决于颜色和屏幕密度），如您在

.pixeleted

中看到的那样

.flag{
  background: linear-gradient(to right, #00ae00 33.3%, white 33.3%, white 66.6%, orange 66.6%);

}

.pixeleted{
    background: linear-gradient(30deg, red 33.3%, black 33.3%, black 66.6%, red 66.6%);
}
    
div {
  width: 290px;
  height: 145px;
  border: 2px solid #999;
  display: inline-block;
}

<div class="flag"></div>
<div class="pixeleted"></div>

Answer 3

您不必重复颜色。也可以这样写：

background: linear-gradient(to right, 
      red    20%, 
      green  0 40%,
      blue   0 60%,
      purple 0 80%,
      yellow 0 100%
  );