css边框颜色渐变

1.直角的背景渐变

1057389-20180911105725287-21529817.png

<style>
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;
}
</style>
<button>进入平台</button>

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

2.圆角的背景渐变

1057389-20180911105313456-238421531.png

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

<style>
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;
}
</style>

<button>进入平台</button>