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

Question

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

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

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

原文由 user8598044 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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;
}

 <div></div>

原文由 Joschi 发布，翻译遵循 CC BY-SA 3.0 许可协议