小程序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