小程序View設置背景顏色漸變+透明+陰影【轉載】

需完成的效果：

做出一個粉色漸變的按鈕，但因爲設置了rgb格式顏色，會與後面的背景顏色重疊，效果就是這樣的：

我想了一個辦法，給按鈕單獨設置一個view（相當於一個框），背景顏色設置成白色，這樣就不會被整體的背景顏色影響。

代碼如下：
wxml文件

<!--給按鈕單獨設置一個view -->
<view class="btn-end-icon"> 
  <view class="btn-end {{end? 'end' :''}}">結束</view>
</view>

wxss文件

wxss文件

/* 設置按鈕背景顏色 */
.btn-end-icon {
  width: 40%;
  height: 75rpx;
  border-radius: 3px 3px 3px 3px;
  background: white;//背景顏色設置成白色
}
/* 設置按鈕樣式 */
.btn-end {
  width: 100%;
  height: 75rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #fff;
  border-radius: 3px 3px 3px 3px; //設置按鈕圓弧效果
  box-shadow: 5px 20px 15px 2px rgba(0, 0, 0, 0.1);  //設置view的陰影效果
}
/* 設置漸變顏色 */
.end {
  background: linear-gradient(270deg, rgba(255, 138, 138, 1), rgba(255, 96, 96, 1));
}

OK，結束…
————————————————
原文鏈接：https://blog.csdn.net/qq_40558766/article/details/103576615