一、概述

在我其中的一项工作经历中，经历了前后端分工的安排，转向了完全的后端，导致前端的技术水平一直保持在jquery、css2这些基础知识认知。虽然自己在有空的时候也会学习vue、css3以及新的脚手架这些新的技术，但是毕竟没有通过项目的验证，学习的东西不够深入。借着这股大环境逐渐恶劣的东风，以及AI，再次面向全栈。

本次练习一个头像组件的开发avatar。

二、核心

核心的样式

.avatar {
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 实现圆形 */
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  overflow: hidden;
}

三、实现

组件完整实现