微信小程序css实现背景渐变效果

先上一个效果图

下面我们实现它，第一步先在 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 : 第三个颜色名  （我们也可以设置两种颜色）