微信小程序通过css实现底部边大圆弧效果

最新推荐文章于 2024-09-06 14:55:10 发布

wjm0519

最新推荐文章于 2024-09-06 14:55:10 发布

阅读量3.1k

点赞数 1

分类专栏：小程序 html+css

本文链接：https://blog.csdn.net/wjm0519/article/details/106288541

版权

html+css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

小程序

5 篇文章 0 订阅

订阅专栏

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.最终效果