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

Question

这可以用线性渐变来实现吗？例如，我可以使用色标以任意比例制作 2 色渐变（红色、绿色），例如下面是 30% 红色，70% 绿色。

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

是否可以按给定的比例做 3 种颜色？

Answer 1

是的，根据 this，您可以指定任意数量的颜色，比例为 percentage.See 以下彩虹示例，其中红色占 50%：

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

fiddle

Answer 2

是的，像这样：

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

jsfiddle