需完成的效果:
做出一个粉色渐变的按钮,但因为设置了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