【uniapp】带圆角渐变边框实现

1. 效果图

2. 代码实现

<image class="item-left-img" :src="url" mode="aspectFill" />

.item-left-img {
  width: 240rpx;
  height: 320rpx;
  border: 6rpx solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #f9fafc, #f9fafc), linear-gradient(180deg, #afbaff, #dee6ff);
  border-radius: 152rpx 152rpx 8rpx 8rpx;
}