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

Question

我想用线性渐变制作如下图所示的边框。我用 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

Answer 1

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

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

请注意，在这种情况下，“橙色 0%”和“红色 100%”是自动的。