Maison > Article > interface Web > 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!