css - 如何在CSS中创建3种颜色的渐变而不进行颜色升级

Question

在此示例中，我具有2种颜色的渐变，并向右对齐。

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

有什么办法可以让我拥有两种以上的颜色吗？例如，我可以在第二个颜色的右边添加红色吗？

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>