先上一个效果图
下面我们实现它,第一步先在 wxml 里写一个 view
<view class="box">
这里放文字...
<view>
然后我们用wxss来实现这个渐变效果,核心代码 -webkit-linear-gradient()
.box {
height: 200rpx;
background: -webkit-linear-gradient(left,pink,lightblue,skyblue);
margin: 20rpx;
border-radius: 30rpx;
}
left : 表示左右渐变,我们还可以设置为上下渐变(值为 top)
pink : 是第一个颜色名
lightblue : 第二个颜色名
skyblue : 第三个颜色名 (我们也可以设置两种颜色)