propriété css3 tutoriel-border-radius

Dans l'article précédent, nous vous avons principalement expliqué le tutoriel-border css3, et avons brièvement mentionné les trois attributs de la bordure. Ensuite, Sister Cui'er vous présentera l'attribut CSS3 tutoriel-border-radius. est l'une des propriétés de la frontière, qui est souvent utilisée dans les travaux de développement front-end. Tout le monde est invité à venir le découvrir.

Laissez-moi d'abord vous montrer un exemple :

Ajouter une bordure arrondie à un élément div :

div
{
border:2px solid;
border-radius:25px;
}

Prise en charge du navigateur :

IE9, Firefox 4, Chrome, Safari 5 et Opera prennent en charge l'attribut border-radius.

Définition et utilisation :

La propriété border-radius est une propriété abrégée utilisée pour définir les quatre propriétés border-*-radius.

Astuce : Cet attribut vous permet d'ajouter des bordures arrondies aux éléments !

Syntaxe :

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

Commentaires : Appuyez sur Cette séquence définit les quatre valeurs pour chaque rayon. Si le coin inférieur gauche est omis, c'est la même chose que le coin supérieur droit. Si le coin inférieur droit est omis, c'est la même chose que le coin supérieur gauche. Si le coin supérieur droit est omis, c'est la même chose que le coin supérieur gauche.

Exemple 1

border-radius:2em;

est équivalent à :

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Exemple 2

border-radius: 2em 1em 4em / 0.5em 3em;

Équivalent à :

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Ce qui précède est le contenu de l'attribut css3 tutoriel-border-radius Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !