--- title: 头像 date: 2023-05-28 16:15:38 permalink: /pages/basics/avatar article: false --- 需要设置成头像的元素加上 class 类名 `cu-avatar`，然后再设置 css 样式 `background-image` 即可 ## 头像形状 > css 代码 ```css .cu-avatar 默认　 .cu-avatar round 圆 .cu-avatar radius 圆角 ``` > 演示代码 ```vue 默认椭圆圆角 ``` ## 头像尺寸 > css 代码 ```css .cu-avatar sm 小 48upx / 24px .cu-avatar 普通 64upx / 32px .cu-avatar lg 大 96upx / 48px .cu-avatar xl 较大 128upx / 64px ``` > 演示代码 ```vue 小尺寸 ``` ## 内嵌文字（图标）父容器加上 `.cu-avatar`，该容器内添加文字或者图标。 > 演示代码 ```vue 港 ``` ## 头像颜色父容器加上 `.cu-avatar .bg-red|...`，该容器内添加文字或者图标。 > 演示代码 ```vue 港 ``` ## 头像组父容器加上 `cu-avatar-group`，该容器内放置头像即可 > 演示代码 ```vue 港 ``` ## 头像标签父容器是头像，该容器内是数字标签。 > 演示代码 ```vue ```