Comment définir une image sur une image circulaire en CSS

Comment définir une image circulaire en utilisant CSS : Vous pouvez utiliser l'attribut border-radius pour définir une image circulaire, avec un code tel que [border-radius:50%]. La propriété border-radius nous permet d'ajouter des bordures arrondies aux éléments.

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

Introduction à l'attribut :

L'attribut border-radius nous permet d'ajouter une bordure arrondie à un élément.

Syntaxe :

border-radius: 1-4 length|% / 1-4 length|%;

Remarque : L'ordre des quatre valeurs​​pour 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.

Valeur de l'attribut :

• longueur définit la forme de la courbe.

• % Utilisez % pour définir la forme des coins.

Le code d'implémentation spécifique est le suivant :

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

style{
    .circle{
        width:120px; 
        height:120px; 
        border-radius:50%; 
        overflow:hidden;
    }
    .circle > img{
        width: 100%;
        height: 100%;
    }
}
<div class="circle">
    <img src="你的图片" alt="正方形的原始图片" />
</div>

Recommandations associées : Tutoriel 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!