如何使用css實作一個圓形頭像框

這篇文章主要介紹了關於如何使用css實現一個圓形頭像框，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

1、方法一

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

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

對應的css為

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

boder-radius為圖片寬度的一半

2、方法二

透過背景圖設定

<p class="bgImg"></p>

對應的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;

顯示效果為

#以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何使用css實作文字環繞

#如何使用CSS3來實作文字摺紙的效果

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