Que représente chaque valeur de l'attribut CSS3 des coins arrondis ?

En CSS3, l'attribut de coin arrondi "border-radius" a 1 à 4 valeurs d'attribut lorsque quatre valeurs d'attribut sont définies, les valeurs d'attribut représentent les valeurs d'attribut arrondies du coin supérieur gauche, en haut à droite. coin, coin inférieur droit et coin inférieur gauche tour à tour, la syntaxe est "bordure-rayon : valeur arrondie supérieure gauche, valeur arrondie supérieure droite, valeur arrondie inférieure droite, valeur arrondie inférieure gauche".

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

Que représente chaque valeur de la propriété CSS3 arrondie ?

CSS3 border-radius - Spécifie chaque coin arrondi,

la propriété border-radius est une propriété composite qui peut spécifier jusqu'à quatre propriétés border -*- radius

Si Si vous spécifiez une seule valeur dans l'attribut border-radius, 4 coins arrondis seront générés.

Cependant, si vous souhaitez spécifier les quatre coins un par un, vous pouvez utiliser les règles suivantes :

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

· 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

· Deux valeurs : la première valeur est le coin supérieur gauche coin supérieur droit et le coin inférieur droit, la deuxième valeur est le coin supérieur droit et le coin inférieur gauche

· Une valeur : Les quatre coins arrondis ont la même valeur

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.

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;

est é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;

(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!