实现带圆角的渐变边框(border-image和border-radius不能同时生效问题)

实现效果:渐变圆角边框(效果如下)

 

已知,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 就酱~

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读