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

效果展示

这个效果的几个核心难点：
边框带渐变色
边框支持设置 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>