如何在没有颜色升级的情况下在 CSS 中创建具有 3 种颜色的渐变答案

【问题标题】：How to create a gradient with 3 colors in CSS without color escalation如何在没有颜色升级的情况下在 CSS 中创建具有 3 种颜色的渐变
【发布时间】：2018-05-15 10:16:56
【问题描述】：

在这个例子中，我有 2 种颜色的渐变，向右对齐。

background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%);

有什么方法可以让我拥有超过 2 种颜色？例如，我可以在第二个右侧添加红色吗？

【问题讨论】：

标签： css colors gradient linear-gradients

【解决方案1】：

当然，只需在每 (100/numColors)% 处添加色标

div {
  background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);
  width: 100%;
  height:64px;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你可以使用多重背景，像这样：

background: linear-gradient(to right, #000, #66a5ad, #66a5ad, red);

更多组合请参见codepen。

【讨论】：