溫馨提示×

微信小程序怎么設置按鈕顏色漸變效果

楓吟
4159
2021-03-24 15:54:11
欄目: 云計算


微信小程序設置按鈕顏色漸變效果的方法:1.創建微信小程序項目;2.在index.wxml文件中添加按鈕組件代碼;3.在index.wxss文件中添加樣式代碼實現漸變;4.保存編輯的代碼并進行調試即可。

微信小程序怎么設置按鈕顏色漸變效果

具體操作步驟如下:

1、首先在創建一個微信小程序項目。

微信小程序怎么設置按鈕顏色漸變效果

2、在pages包下的index目錄中index.wxml文件里添加按鈕組件代碼<button>來實現一個簡單的按鈕。

<!--設置一個按鈕 -->

<button class="goodbutton">按鈕</button>

微信小程序怎么設置按鈕顏色漸變效果

3、在pages包下的index目錄中index.wxss文件添加樣式代碼來按鈕顏色漸變的效果。

/* border-radius: 98rpx;是控制按鈕邊變圓 */

.goodbutton {

  margin-top: 30px;

  width: 70%;

  background: -webkit-linear-gradient(left,pink,lightblue,skyblue);

  color: white;

  border-radius: 98rpx;

  background: bg_red;

}

微信小程序怎么設置按鈕顏色漸變效果

4、最后保存編輯的代碼進行調試,保存快捷鍵【Ctrl+S】。

在開發工具左側即可看到設計效果。

微信小程序怎么設置按鈕顏色漸變效果

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女