border-image实现渐变边框

一：给矩形实现渐变边框

border: 4rpx solid;
border-image: linear-gradient(45deg, #d4741a, #ee9117) 1;

效果：

缺点：这种方法不能给圆角矩形添加渐变边框

二：给圆角矩形添加渐变边框

方法：先添加background-image渐变背景  再叠加一个白色背景在上面，实现渐变边框

缺点 ：如果要求边框里面是透明效果，该方法不可行

三：使用border-image 和clip-path属性实现渐变边框

border: 6rpx solid;
border-image: linear-gradient(45deg, #d4741a, #ee9117) 1;
clip-path: inset(0rpx round 6rpx);

效果：

四：直接将边框导出成图片

<view>
	<image mode="aspectFit" src="../../static/icon/border.svg"></image>
    <text>获取验证码</text>
</view>

效果：