border-image可以实现边框渐变,但border-radius在这种设置下会失效!我们可以通过两个view包裹来实现:
<template>
<view class="navitem">
<view class="navitem_in">
</view>
</view>
</template>
<style lang="scss">
.navitem{
box-sizing: border-box;
width: 148rpx;
height: 148rpx;
border-radius: 12rpx;
padding: 2rpx;
background: linear-gradient(180deg, rgba(255, 244, 233, 1), rgba(255, 230, 205, 1));
.navitem_in{
width: 100%;
height: 100%;
background: #FFFAF3;
border-radius: 12rpx;
}
}
}
</style>