CSS_渐变边框

示例图：

方法一：伪元素 + 定位

.btn{
    position: relative;
}
&::before {
    content: '';
    position: absolute;
    top: -2rpx;
    right: -2rpx;
    bottom: -2rpx;
    left: -2rpx;
    z-index: -1;
    border-radius: 46rpx; /* 与按钮相同的圆角 */
    background: linear-gradient(to right, #86bff8, #8dc3fa, #8aaaf8, #3f7ff4);
}

方法二： div + 绝对定位（底部使用渐变背景）

.btn_bg{
	height: 90rpx;
	border-radius: 46rpx;
	background: linear-gradient(to bottom right, #86bff8, #8dc3fa, #8aaaf8, #3f7ff4);
}
.btn{
    position: absolute;
    top: 4rpx;
    left: 4rpx;
    border-radius: 46rpx;
    color: #6579dd;
    background-color: #f5f1ff;
    width: 504rpx;
    height: 82rpx;
}

方法三：border属性（缺点是圆角无效）

.btn{
    border: 8px solid transparent; /* 边框宽度，颜色为透明 */
    border-image: linear-gradient(to right, red, yellow, green, blue); /* 渐变边框色 */
    border-image-slice: 1; /* 保证渐变完全覆盖边框 */
    border-radius: 15px; /* 设置圆角效果 */
 }