或
.topicBox {
position: absolute;
right: 8rpx;
top: 50%;
transform: translateY(-50%);
width: 160rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 6rpx 6rpx;
background-color: white; //关键代码:给个白色的底色,让其一种粉色系的效果
color: #fa3534;//字体颜色为红色
border: 2rpx solid #fa3534;//边框为颜色为红色
border-radius: 0 72rpx 72rpx 0;
display: flex;
justify-content: center;
align-items: center;
//添加个伪类是关键
&::before {
position: absolute;
width: 100%;
height: 100%;
content: '';
background-color: #fa3534;//伪类背景为颜色为红色
opacity: 0.1;//关键代码:设置透明度让其颜色变浅效果
}
}
可以将#fa3534
色值换成主题色变量var(--bgColor1)
比如:紫色,这样一个主题色即可完成两种颜色渐变效果的按钮