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

1. 效果图

2. 代码实现

html 复制代码
<image class="item-left-img" :src="url" mode="aspectFill" />
css 复制代码
.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;
}
相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
前端程序猿-秦祥2 小时前
uniapp拦截返回事件
uni-app
雪芽蓝域zzs6 小时前
uniapp input 如何只读禁用输入可点击
uni-app
xw58 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
!win !8 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
iOS阿玮14 小时前
为什么独立开发者都在AppStore而不去安卓市场?
uni-app·app·apple
xiaohe060119 小时前
🪀 Uni ECharts:也许是 uni-app 中使用 ECharts 最优雅的解决方案
uni-app
陈不知代码1 天前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw1 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者1 天前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app