css 實現圓形頭像

1、方法一

直接設置img為圓形，這種情況下如果圖片不是正方形，圖片會被拉伸

<img class="circleImg" src="../img/photo/img.jpg"  />

相應的css為

.circleImg{
  border-radius: 30px;
  width:60px;
  height:60px; 
}

boder-radius為圖片寬度的一半

2、方法二

通過背景圖設置

<div class="bgImg"></div>

相應的css為　

.bgImg{ 
  border-radius: 30px;
  width:60px;
  height:60px; 
  background: url("../img/photo/img.jpg") no-repeat center;
  background-size:60px;
}

拖圖片不是方形，則按照寬度等比例顯示，則background-size設置為圖片寬度，高度為auto，若需要按照高度等比例顯示，則background-size:auto 60px;

顯示效果為