WeChat 애플릿에서 페이지 그라데이션을 설정하는 방법-미니 프로그램 개발-php.cn

WeChat 애플릿에서 페이지 그라데이션을 설정하는 방법

WeChat 애플릿에서 페이지 그라데이션을 설정하는 방법

WeChat 애플릿은 CSS -webkit-linear-gradient()를 사용하여 페이지 배경색 그라데이션을 설정합니다.

1. WXSS 코드:

.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: 위쪽 및 아래쪽 그라데이션을 나타내며 왼쪽 및 오른쪽 그라데이션으로 설정할 수도 있습니다(값은 왼쪽임)

white: 첫 번째 색상 이름

lightblue: 두 번째 색상 이름

rgb(83, 201, 248): 세 번째 색상 이름(두 가지 색상도 설정할 수 있음)

WeChat 애플릿에서 페이지 그라데이션을 설정하는 방법

2 버튼의 그라데이션도 얻을 수 있습니다:

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

로그인 후 복사

WeChat 애플릿에서 페이지 그라데이션을 설정하는 방법