css如何實現圓形頭像

css實現圓形頭像的方法：可以透過直接設定img為圓形的方式來實現，如【border-radius: 30px;】。需要注意的是使用這種方式如果圖片不是正方形，那麼圖片會被拉伸。

可以透過以下兩種方式來實現：

#方法一：直接設定img為圓形，這種情況下如果圖片不是方形，圖片會被拉伸

（學習影片分享：css影片教學）

<img  class="circleImg" src="../img/photo/img.jpg"  / alt="css如何實現圓形頭像" >

對應的css為：

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

boder-radius為圖片寬度的一半。

方法二：透過背景圖設定

<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;。

實現效果：

#相關推薦：CSS教學

以上是css如何實現圓形頭像的詳細內容。更多資訊請關注PHP中文網其他相關文章！