css 3色线性渐变，色彩边界清晰

Question

这是否可以通过线性渐变来实现？例如，我可以使用颜色停止以任何比例进行双色渐变（红色，绿色），例如以下是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%)

jsfiddle

Answer 2

是的，你可以根据this指定任意数量的颜色，比例为百分比。参见以下彩虹示例，其中红色占50％：

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

fiddle