So implementieren Sie mit CSS einen kreisförmigen Avatar-Frame

In diesem Artikel wird hauptsächlich die Verwendung von CSS zum Realisieren eines kreisförmigen Avatar-Rahmens vorgestellt, der einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen

Methode 1 >

Setzen Sie img direkt auf einen Kreis. Wenn das Bild in diesem Fall nicht quadratisch ist, wird es gestreckt.

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

Das entsprechende CSS ist

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

der Randradius Breite des Bildes Halb

2. Methode 2

Legen Sie

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

über das Hintergrundbild fest. Das entsprechende CSS ist

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

Wenn das gezogene Bild ist nicht quadratisch, es wird proportional zur Breite angezeigt, dann wird die Hintergrundgröße auf die Breite des Bildes und die Höhe auf automatisch eingestellt. Wenn es proportional zur Höhe angezeigt werden muss, dann gilt: auto 60px;

Der Anzeigeeffekt ist

Das Obige ist der gesamte Inhalt dieses Artikels Verwandte Inhalte, achten Sie bitte auf die chinesische PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie CSS zum Umbrechen von Text

So verwenden Sie CSS3, um einen Text-Origami-Effekt zu erzielen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit CSS einen kreisförmigen Avatar-Frame. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!