微信小程序獲取用戶頭像有兩種方式：


一種是通過調用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圓角顯示"文章，如果你在這方面有什么問題，隨時聯系我們