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

先上一个效果图


微信小程序css实现背景渐变效果_第1张图片
来自微信开发者工具截图

下面我们实现它,第一步先在 wxml 里写一个 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 : 第三个颜色名  (我们也可以设置两种颜色)

你可能感兴趣的:(微信小程序css实现背景渐变效果)