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

最新推荐文章于 2024-08-10 17:53:33 发布

liu__software

最新推荐文章于 2024-08-10 17:53:33 发布

阅读量1.6k

点赞数 1

分类专栏： css3 文章标签： css css3

原文链接：https://blog.csdn.net/code_5/article/details/106293842

版权

css3 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

当border-image导致border-radius失效时，文章提出了一种解决方案：通过设置背景颜色渐变和内层div的padding及border-radius，同样可以实现渐变圆角边框的效果。具体方法是创建一个外层div设置渐变背景和圆角，内层div设置相同圆角和白色背景，利用padding模拟边框。

摘要由CSDN通过智能技术生成

实现效果：渐变圆角边框（效果如下）

已知，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 就酱~
————————————————
版权声明：本文为CSDN博主「小黄鸭404」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/code_5/article/details/106293842