HTML实现圆形头像效果

展示圆形的图片是很多常见需求之一，因为有Android开发经验，难免会从Android开发角度去考虑问题，Android中实现一张图片的圆形效果一般通过自定义view的clip处理，而HTML却很简单。虽然简单，但还是遇到一点坑，比如圆形化处理的图片并没有裁剪中间部分，而是默认左上角，毕竟昨天还在开心的写着Android，今天就开始摸索前端的东西，这种心情大家能理解吗[悲剧··]。

好了，废话不多说，来看看怎么实现的：

• css代码：

  .round_icon{
    width: 34px;
    height: 34px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

• Html:

  "../../source/images/what_ever.jpg" class="round_icon"  alt="">

对，你没有看错，就是这么简单。由于现在前端是边看边做，所以实现方式可能比较幼稚或者浅显，欢迎大家指导一下更加适合的实现方式。