如何使用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;

顯示效果為

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！