我想用线性渐变制作如下图所示的边框。 我用 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%;
请注意,在这种情况下,“橙色 0%”和“红色 100%”是自动的。
关于css - 如何制作像下面上传的图片那样的 3 种颜色的边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41764788/