Maison >interface Web >tutoriel CSS >Comment rendre les images CSS rondes

Comment rendre les images CSS rondes

青灯夜游original: 2021-07-21 16:55:1610441parcourir

En CSS, vous pouvez utiliser l'attribut border-radius pour arrondir l'image, ajoutez simplement le style "border-radius: 50%;" à l'élément img. L'attribut border-radius peut définir une bordure arrondie sur un élément. Le rayon des coins arrondis ne peut pas dépasser la moitié de la largeur/hauteur.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser l'attribut border-radius pour arrondir l'image.

Jetons un coup d'œil à l'exemple de code ci-dessous :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			img{
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%"  style="max-width:90%"/ alt="Comment rendre les images CSS rondes" >

	</body>
</html>

Rendu :

Comment rendre les images CSS rondes

Description :

L'attribut border-radius est utilisé pour définir une bordure arrondie pour l'élément, et vous pouvez spécifier une valeur de 1 à 4. Créez (1 à 4) coins arrondis pour la bordure ; le rayon des coins arrondis ne peut pas dépasser la moitié de la largeur/hauteur.

Syntaxe :

border-radius: 1-4 length|%

Valeur :

length Définit la forme de la courbe.
% Utilisez % pour définir la forme des coins.

Remarque : L'ordre des quatre valeursde chaque rayon est : coin supérieur gauche, coin supérieur droit, coin inférieur droit, coin inférieur gauche. Si le coin inférieur gauche est omis, le coin supérieur droit est le même. Si le coin inférieur droit est omis, le coin supérieur gauche est le même. Si le coin supérieur droit est omis, le coin supérieur gauche est le même.

Quatre valeurs : la première valeur est le coin supérieur gauche, la deuxième valeur est le coin supérieur droit, la troisième valeur est le coin inférieur droit et la quatrième valeur est le coin inférieur gauche.

border-radius: 15px 50px 30px 5px
Trois valeurs : la première valeur est le coin supérieur gauche, la deuxième valeur est le coin supérieur droit et le coin inférieur gauche, la troisième valeur est le coin inférieur droit

border-radius: 15px 50px 30px
Deux valeurs : la première valeur est le coin supérieur gauche et le coin inférieur droit, la deuxième valeur est le coin supérieur droit et le coin inférieur gauche

border-radius : 15px 50px
Une valeur : quatre coins arrondis Les valeurs sont les mêmes

border-radius: 25px

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi l’image d’arrière-plan définie par CSS ne peut-elle pas être affichée ?Article suivant：Pourquoi l’image d’arrière-plan définie par CSS ne peut-elle pas être affichée ?

Articles Liés

Voir plus