這篇文章主要介紹了關於如何使用css實現一個圓形頭像框，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
直接設定img為圓形，這種情況下如果圖片不是正方形，圖片會被拉伸
<img class="circleImg" src="../img/photo/img.jpg" />
對應的css為
.circleImg{
border-radius: 30px;
width:60px;
height:60px;
}boder-radius為圖片寬度的一半
透過背景圖設定
<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實作一個圓形頭像框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
