微信小程序获取用户头像有两种方式：


一种是通过调用wx.getUserInfo方法，从userInfo字段中解析出avatarUrl。


另一种是通过open-data组件，直接将用户头像显示在页面指定位置。



针对第二种方法，无法使用border-radius:50%来设置头像圆角，需要使用clip-path: circle(50rpx at center);进行四周的剪裁，具体代码示例如下：



 
.avatar{
  width: 100rpx;
  height: 100rpx;
  clip-path: circle(50rpx at center);
}
 


注：


1. open-data组件依赖的小程序基础库版本号最低为1.9.90


2. clip-path CSS 属性可以对元素的部分区域进行裁剪(隐藏)。


 


 


 


--------------------------------------------------------------------------------------------------


5.8修改


针对属性border-radius:50%，实际也可以奏效，需要配合overflow:hidden来使用，完整代码：



 
.avatar{
  width: 100rpx;
  height: 100rpx;
  overflow:hidden;  
  border-radius: 50%; 
}
 

以上是由福州网站建设的小编为你分享了"微信小程序open-data userAvatarUrl圆角显示"文章，如果你在这方面有什么问题，随时联系我们