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>
效果
原圖：
圓形：