如何在CSS中使用3种颜色创建渐变而不会出现颜色上升

Question

在这个例子中,我有一个2色的渐变,alignd到right.

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

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

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>