Is it possible to make a gradient border?

前端 未结 12 1068
陌清茗
陌清茗 2020-12-16 16:54

As the title states, is it possible to make a gradient border in CSS3 and if so how? I know that you can make gradient backgrounds and there are many generators for that, bu

12条回答
  •  离开以前
    2020-12-16 17:40

    Border with linear gradient.

    HTML

    ...Some HTML...

    CSS

    #input_parameters {
    border: 10px solid transparent;
    
    border-image: linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);
    
    -webkit-border-image: -webkit-linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);
    
    border-image-slice: 1;
    }
    

提交回复
热议问题