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>
网友评论