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

【问题标题】：Generate solid colors using CSS linear-gradient (not smooth colors)使用 CSS 线性渐变生成纯色（不是平滑颜色）
【发布时间】：2017-12-19 05:42:02
【问题描述】：

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

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

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

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

类似的东西：

谢谢

【问题讨论】：

标签： css gradient linear-gradients

【解决方案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%
  );
}

&lt;div class="gradient"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

颜色#00ae00 将一直应用到div 的33.3%
从那时起直到66.6%，white 将被应用
最后orange 将从66.6% 开始直到框结束

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

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

.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>

【讨论】：