html边框渐变隐藏,css边框颜色渐变

在实际开发中，我们经常遇见边框需要背景渐变的实现要求，那么如何去实现呢，今天给大家分享依稀几种情况

1.直角的背景渐变

border渐变

button{

background:transparent;

color:#23b7cb;

font-size:15px;

padding:5px 15px;

border:1px transparent solid;

border-image:linear-gradient(to right,#000718,#23b7cb) 1 10;

}

进入平台

注意问题：border-image的使用是不能实现圆角的效果，各位需要注意这个属性

2.圆角的背景渐变

代码如下：利用伪类元素去实现背景边的渐变效果，同时我们还可以加上动画效果，利用的是transtion:all ease 300ms即可，主要使用了

linear-gradient这个属性

border渐变

button{

color: #23b7cb;

font-size: 15px;

padding: 5px 15px;

background: #fff;

border: 1px transparent solid;

border-radius: 30px;

position: relative;

}

button:after{

content:'';

position: absolute;

top: -3px; bottom: -3px;

left: -3px; right: -3px;

background: linear-gradient(135deg,#000781, #23b7cb);

border-radius: 30px;

content: '';

z-index: -1;

}

进入平台