如何实现圆角且带有渐变的边框

需要实现的UI如下

设计稿查看

问题：border-image 会导致设置的 border-radius 失效

原因如下：

此问题会导致绘制出来的渐变边框没有圆角。

解决方案：可使用 clip-path 属性剪裁掉多余的部分

示例：

    border: 2rpx solid;
    border-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0)
      )
      2 2;
    border-radius: 16rpx;
    // !clip path to fix border-radius bug because of border-image
    clip-path: inset(0 round 16rpx);

属性具体信息：clip-path──MDN

参考

• 巧妙实现带圆角的渐变边框