css圆角border-radius 属性
2021-01-16 本文已影响0人
吃肉肉不吃肉肉
-
圆角border-radius 属性
效果:
image.png
代码:
//注意image的宽高要与父元素的宽高一致
<view class="image-radius">
<image :src="item.headImage" mode="widthFix style="width: 120rpx;"></image>
</view>
.image-radius{
width: 120rpx;
height:120rpx;
border-radius:50%;
overflow:hidden;
}
效果:
image.png
代码:
<view :class="stateColor">
<text>未应战</text>
</view>
.stateColor{
width: 144rpx;
height: 56rpx;
line-height: 56rpx;
text-align: center;
color: #fff;
font-size: 28rpx;
font-weight: bold;
position: absolute;//定位
top: 0;
right: 0;
border-radius:0px 24px 0px 48px;//圆角四个角度
background-image: linear-gradient(#13AEFE,#7BC9FB);//渐变
}