当前位置：首页 > article >正文

【css实现边框圆角渐变效果】

article 2025/2/22 11:48:59

效果展示

在这里插入图片描述
这个效果的几个核心难点：
边框带渐变色
边框支持设置 border-radius
内部支持透明
思考一下，使用 CSS，我们可以如何实现这个效果？

方法一两层盒子

// 使用两层
<div class="border-box">
    <div class="border-content"></div>
</div>
<style scoped>
/* 外层盒子做渐变 */
.border-box {
    width: 200px;
    background: linear-gradient(0deg, #00135a, #01a1ff);
    border-radius: 5px;
    padding: 2px;
    margin: 10px auto;
} 
/* 内层盒子使用白色填充，外层与内层同时设置border-radius */
.border-content {
    width: 200px;
    height: 100px;
    border-radius: 5px;
    background-color: white;
}
</style>

方法二使用mask

// 正常对盒子进行渐变
<div class="border-box"></div>
<style scoped>
.border-box {
    width: 200px;
    height: 100px;
    border-radius: 5px;
    padding: 1px;
    margin: 20px auto;
    /* 渐变 */
    background: linear-gradient(to right, #00135a, #01a1ff);
    /* 线性渐变：从开始到结束都为白色，这里使用两个，不同的是第一个带content-box */
    /* 原因就是为了能多出一个空间 */
    -webkit-mask: linear-gradient(#fff 0 100%) content-box,
        linear-gradient(#fff 0 100%);
     /* 使用-webkit-mask-composite: xor; 只显示不重合的地方*/
    -webkit-mask-composite: xor;
}
</style>