如何制作像下面上传的图片那样的 3 种颜色的边框?

How to make a border with 3 colors like the image uploaded below?

我想用线性渐变制作如下图所示的边框。 我写了2种颜色;

border-image:  linear-gradient(orange 50%, blue 50%) 1 100%;

但是当我尝试使用 3 种颜色时它不起作用;

border-image: linear-gradient(orange 0%, blue 33%, red 99%) 1 100%;

我怎样才能做到?

JSFIDDLE

我知道你想要三种纯色条纹 - 橙色、蓝色、红色 - 具有突然的过渡,而不是平滑的颜色。为此,您需要使用相同颜色的开始和结束来定义每个部分,并且一个部分的结尾与下一个部分的开头具有相同的百分比:

border-image: linear-gradient(orange 33%, blue 33%, blue 66%, red 66%) 1 100%;

请注意 "orange 0%" 和 "red 100%" 在这种情况下是自动的。