Comment obtenir une image circulaire en utilisant du CSS pur ? (exemple de code)

Avez-vous déjà réfléchi à la façon de créer toutes sortes d'images circulaires sans utiliser PS ? Cet article vous présentera comment utiliser CSS pour réaliser des images circulaires. Sans plus tarder, regardons directement le contenu spécifique. .

Code de base

Commençons par le HTML et le CSS de base (je suppose que vous pouvez créer un document HTML vierge et y lier une feuille de style).

<div class="img-circular"></div>

Définissons un style de base pour la classe img-circular.

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('image/flower.jpg');
 background-size: cover;
 display: block;
}

L'effet est le suivant :

Explication : background -size dans le code ci-dessus est un nouvel attribut CSS3 qui peut être utilisé à l'aide du taille de l'arrière-plan. Vous pouvez définir sa largeur et sa hauteur en entrant des valeurs de pixels exactes, des pourcentages, ou créer une couverture d'arrière-plan ou l'adapter à l'ensemble du conteneur. Assurez-vous de consulter le document de taille d'arrière-plan pour plus d'informations. (Recommandations associées : manuel d'étude CSS3)

Ensuite, nous expliquerons en détail l'implémentation CSS des images circulaires

Maintenant, nous avons Image qui correspond à notre conteneur carré. Modifions le code CSS pour créer un cadre circulaire. Nous allons utiliser l'attribut border-radius qui nous donne la possibilité de contourner les coins de l'élément auquel il est appliqué. Pour obtenir une image circulaire, nous devons donner à l’image une valeur égale à la moitié de la taille de l’image. Notre code CSS ressemble maintenant à ceci :

	.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('image/flower.jpg');
 background-size: cover;
 display: block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
}

L'effet du CSS pour obtenir une image circulaire est le suivant :

Remarque : Maintenant, il a terminé le CSS pour implémenter l'image circulaire ! Les nouvelles propriétés CSS nous permettent de créer des effets qui font gagner du temps avec Photoshop.

Extensions

Si vous regardez attentivement la propriété border-radius, vous pouvez manipuler les coins de l'image de manière asymétrique façon, Pour plus de détails, vous pouvez regarder le code CSS suivant

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('image/flower.jpg');
 background-size: cover;
 display: block;
 border-top-left-radius: 100px;
 -webkit-border-top-left-radius: 100px;
 -moz-border-top-left-radius: 100px;
 border-bottom-right-radius: 100px;
 -webkit-border-bottom-right-radius: 100px;
 -moz-border-bottom-right-radius: 100px;
}

et l'effet est le suivant :

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!