1.字体超出省略号…
width: 272rpx;
height: 64rpx;
font-size: 24rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FACE94;
line-height: 32rpx;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
2. 字体颜色渐变
注:必须放到 text中,要不在真机上不显示
font-weight: 500;
color: #FFFFFF;
font-weight: bold;
background: linear-gradient(to bottom, #F9D7B5, #F9AD73);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: PingFangSC-Medium, PingFang SC;
3.圆圈画法
<view class="yuan2">
<view>爆</view>
</view>
<view class="yuan1">
<view>爆</view>
</view>
.yuan1{
width: 36px;
height: 36px;
border: 1px solid #FFDBAB;
border-radius: 50%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #EACB9D;
margin-left: 10rpx;
}
.yuan1 view {
width: 30px;
height: 30px;
border: 3rpx solid #bbb4a9;
border-radius: 50%;
background: #155756;
line-height: 30px;
text-align: center;
}
.yuan2 {
width: 75rpx;
height: 75rpx;
background: linear-gradient(180deg, #155756 0%, #135250 100%);
border: 2px solid #F2B27F;
border-radius: 50%;
text-align: center;
line-height: 75rpx;
color: #EACB9D;
font-weight: 600;
font-size: 40rpx;
margin-left: 15rpx;
}