如何制作像下面上传的图片那样的 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%;
我怎样才能做到?
我知道你想要三种纯色条纹 - 橙色、蓝色、红色 - 具有突然的过渡,而不是平滑的颜色。为此,您需要使用相同颜色的开始和结束来定义每个部分,并且一个部分的结尾与下一个部分的开头具有相同的百分比:
border-image: linear-gradient(orange 33%, blue 33%, blue 66%, red 66%) 1 100%;
请注意 "orange 0%" 和 "red 100%" 在这种情况下是自动的。
我想用线性渐变制作如下图所示的边框。 我写了2种颜色;
border-image: linear-gradient(orange 50%, blue 50%) 1 100%;
但是当我尝试使用 3 种颜色时它不起作用;
border-image: linear-gradient(orange 0%, blue 33%, red 99%) 1 100%;
我怎样才能做到?
我知道你想要三种纯色条纹 - 橙色、蓝色、红色 - 具有突然的过渡,而不是平滑的颜色。为此,您需要使用相同颜色的开始和结束来定义每个部分,并且一个部分的结尾与下一个部分的开头具有相同的百分比:
border-image: linear-gradient(orange 33%, blue 33%, blue 66%, red 66%) 1 100%;
请注意 "orange 0%" 和 "red 100%" 在这种情况下是自动的。