先上一個(gè)效果圖

來自微信開發(fā)者工具截圖

下面我們實(shí)現(xiàn)它，第一步先在 wxml 里寫一個(gè) view

<view class="box">

? ? ? ? 這里放文字...

<view>

然后我們用wxss來實(shí)現(xiàn)這個(gè)漸變效果，核心代碼??-webkit-linear-gradient()

.box {

????height: 200rpx;

? ? background: -webkit-linear-gradient(left,pink,lightblue,skyblue);

? ? margin: 20rpx;

? ? border-radius: 30rpx;

}

left : 表示左右漸變，我們還可以設(shè)置為上下漸變（值為 top)

pink : 是第一個(gè)顏色名

lightblue ： 第二個(gè)顏色名

skyblue : 第三個(gè)顏色名? （我們也可以設(shè)置兩種顏色）