1、正方形照片
如果仅仅是正方形照片可直接设置 border-radius：50%解决。
代码
<img src="xxxxxxx" style="border-radius: 50%"/>
效果
2、长方形照片
如果是长方形，例如各种证件照，如果仅使用border-radius 就会出现照片被拉伸。
此时使用一个div将其遮住的方法实现就可解决
代码
1 <div style="width: 100px;height: 100px;border-radius: 50%;overflow: hidden;position:relative;"> 2 <img width="100" height="140" style="position:absolute; top:-20px;" src="xxxxxxx"> 3 </div>
效果
原图：
圆形：