Comment utiliser CSS pour implémenter un cadre d'avatar circulaire

Cet article présente principalement comment utiliser CSS pour réaliser un cadre d'avatar circulaire, qui a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Méthode 1

Définir img directement sur un cercle. Dans ce cas, si l'image n'est pas carrée, l'image sera étirée

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

Le css correspondant est

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

boder. -radius C'est la moitié de la largeur de l'image

2. Méthode 2

Définir l'image d'arrière-plan

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

et le CSS correspondant est

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

Faire glisser l'image n'est pas carré, elle sera affichée proportionnellement à la largeur, puis la taille de l'arrière-plan est définie sur la largeur de l'image et la hauteur est automatique si elle doit être affichée proportionnellement à la hauteur. , then background-size:auto 60px;

L'effet d'affichage est

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile. à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS pour envelopper du texte

Comment utiliser CSS3 pour obtenir un effet origami de texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!