微信小程序通過css實現底部邊大圓弧效果

1.場景

需在個人中心添加下邊框爲圓弧

2.在wxml中定義一個class節點

<view>
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
</view>

3.在wxss中添加css代碼

.userinfo {
  display: relative;
  flex-direction: column;
  align-items: center;
  height: 300rpx;
}
.userinfo::after{
  content: '';
  width: 120%;
  height: 300rpx;
  position: absolute;
  z-index: -1;
  left: -10%;
  top: 0;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(160deg,#84c4ef, #84c4ef);
}

4.最終效果