使用 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。在 .flag 中：

颜色 #00ae00 将应用到 div 33.3%
从那时起直到 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%);


margin-right: 20px;
}

.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%
  );

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

Generate solid colors using CSS linear-gradient (not smooth colors)

css

gradient

linear-gradients