CSS 3 色线性渐变，具有清晰的颜色边界

Question

这

可以通过线性梯度来实现吗？例如，我可以用色标以任何比例进行 2 色渐变(红色、绿色(，例如下面的是 30% 红色、70% 绿色。

background: linear-gradient(to right, red 30%, green 30%);

是否可以以给定的比例制作 3 种颜色？

Answer 1

是的，像这样：

background: linear-gradient(to right, red 30%, green 30%, green 60%, blue 60%)

斯菲德尔

Answer 2

是的，您可以，根据此，您可以使用百分比比例指定任意数量的颜色。请参阅以下彩虹示例，其中红色占 50%：

background: linear-gradient(to right, red 50%, orange, yellow, green, blue, 
indigo, violet);

小提琴