实现效果:渐变圆角边框(效果如下)
已知,border-image可以给边框设置渐变效果,border-radius可以设置圆角。
ok!然鹅,我的圆角呢!!!
布吉岛为什么,写了border-image之后,我的border-radius就无效了!!!
哭泣!!!但是,
换个思路!不用border-image也可以解决的思路!
不如就让我们试试用border-radius和background-image来实现吧!
首先给一个div设置渐变背景颜色,然后设置一个padding值(padding的大小就是原本边框的大小);
然后在里面添加一个子div,背景颜色设置成白色,border-radius设置和外层一样即可。
1)给这个div外层添加一个div;
<div class="main">
<div class="main_in"></div>
</div>
2)设置div的圆角(8px),设置背景颜色渐变,设置一个padding值
(padding用来实现border效果,所以这个值跟border的值是一样的)
3)内层div设置和外层div一样大小的圆角8px,把背景颜色设置为白色。
.main {
width: 176px;
height: 60px;
box-sizing: border-box;
padding: 2px;
border-radius: 8px;
background-image: -webkit-linear-gradient(90deg, rgba(24, 191, 246, 1), rgba(24, 117, 246, 1));
}
.main_in {
width: 100%;
height: 100%;
border-radius: 8px;
background: #fff;
}
ok 就酱~