|
在实际开发中，我们经常遇见边框需要背景渐变的实现要求，那么如何去实现呢，今天给大家分享依稀几种情况
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;
/* 给按钮添加阴影效果 */
box-shadow: 5px 6px 10px #000;
}
进入平台
注意问题：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;
}
进入平台
|