> ## Content Index
> Fetch the complete content index at: https://lucent.blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# 微信小程序头像样式
- URL: https://lucent.blog/wei-xin-xiao-cheng-xu-tou-xiang-yang-shi/
- Published: 2019-08-20T03:49:54.000Z
- Updated: 2026-08-21T00:49:55.000Z
- Author: Lucent
- Tags: 小程序

#### 效果：

![](https://raw.githubusercontent.com/xhmily/imgbed/master/images/20190820115102.png)

#### 代码:

```html
  <view class="userinfo">
    <view class="userinfo-avatar">
      <open-data  type="userAvatarUrl"></open-data>
    </view>
      <open-data type="userNickName"></open-data>
  </view>

```

```css
.userinfo {  
  position: relative;  
  width: 750rpx;  
  height: 320rpx;  
  color: #fff;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
  
.userinfo-avatar {  
  overflow:hidden;  
  display: block;  
  width: 160rpx;  
  height: 160rpx;  
  margin: 20rpx;  
  margin-top: 50rpx;  
  border-radius: 50%;  
  border: 2px solid #fff;  
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);  
}  
  
.userinfo{  
  /* color: #fff; */  
  font-size: 14px;  
  background-color: #c0c0c0;  
  border-radius:40%;  
}

```