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

先上一个效果图

文章图片
来自微信开发者工具截图下面我们实现它，第一步先在 wxml 里写一个 view

这里放文字...

然后我们用wxss来实现这个渐变效果，核心代码-webkit-linear-gradient()

.box {
【微信小程序css实现背景渐变效果】height: 200rpx;
background: -webkit-linear-gradient(left,pink,lightblue,skyblue);
margin: 20rpx;
border-radius: 30rpx;
}

left : 表示左右渐变，我们还可以设置为上下渐变（值为 top)
pink : 是第一个颜色名
lightblue ：第二个颜色名
skyblue : 第三个颜色名（我们也可以设置两种颜色）

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