How to set page gradient in WeChat applet

How to set the page gradient in the WeChat applet

WeChat applet sets the page background color gradient using css -webkit-linear-gradient( )to fulfill.

1. WXSS code:

.container{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: -webkit-linear-gradient(top,white,lightblue,rgb(83, 201, 248)); color: rgb(241, 161, 155); font-size: 18px; } .container text{ display: block; margin: 40rpx; }

top: represents the up and down gradient, we can also set it to the left and right gradient (the value is left)

white: is the first One color name

lightblue: The second color name

rgb(83, 201, 248): The third color name (we can also set two colors)

2. The gradient of the button can also be realized:

/* border-radius: 98rpx;是控制按钮边变圆 */ .goodbutton { margin-top: 30px; width: 70%; background: -webkit-linear-gradient(left,pink,lightblue,skyblue); color: white; border-radius: 98rpx; }

Recommended learning:小program development

The above is the detailed content of How to set page gradient in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!