圆角渐变边框的实现

最新推荐文章于 2025-05-25 23:10:07 发布

韩大璐

最新推荐文章于 2025-05-25 23:10:07 发布

阅读量1.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： css 文章标签：圆角边框渐变边框圆角渐变边框 border-image

本文链接：https://blog.youkuaiyun.com/weixin_41257563/article/details/85328239

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用CSS实现圆角渐变边框的方法。通过设置两个嵌套的盒子，给父盒子添加渐变背景并设置圆角，同时使子盒子背景与页面背景一致，以此达到渐变圆角边框的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

渐变边框的实现：

border:6px solid;
border-image: -webkit-linear-gradient( pink,rosybrown) 50 50;
border-image: -moz-linear-gradient(pink,rosybrown)50 50;
border-image: linear-gradient(pink,rosybrown)50 50;

在这里插入图片描述

这样就实现了一个渐变颜色的边框。
但是border-image没有办法设置圆角的边框怎么办？
既然border-image没有办法实现，我们可以换个思路，通过两个嵌套的父子盒子，给父盒子设置渐变背景来实现。

<div class="container">
 	<div class="content"></div>
</div>

 .container{
   width: 200px;
    height: 80px;
    margin: 0 auto;
    position: relative;
    /*给父元素设置渐变背景色*/
    background: -webkit-linear-gradient(30deg, pink,rosybrown);
    /*给父元素设置圆角边框*/
    border-radius: 8px;
}
.content{
    width: 190px;
    height: 70px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    /*让子元素背景色同页面背景色一致*/
    background: #fff;
    /*让子元素圆角同父元素保持一致*/
    border-radius: 8px;
}