css圆角border-radius 属性

• 圆角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;                
}

效果：

代码：

 <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);//渐变
}