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

Question

我想用线性梯度来制作像图像一样的边框。我用两种颜色写的；

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%”是自动的。