Que signifie le rayon en CSS

En CSS, la propriété radius est utilisée pour définir le rayon des coins d'un élément afin de créer un look plus beau et plus moderne. Les valeurs de propriété contiennent une longueur ou un pourcentage absolu, ou héritent du rayon de l'élément parent. La spécification d'une valeur affecte les quatre coins, la spécification de deux valeurs affecte respectivement les rayons des coins supérieur gauche et inférieur droit, ainsi que les coins supérieur droit et inférieur gauche. L'attribut radius est largement pris en charge par tous les navigateurs modernes.

Quelle est la signification du rayon en CSS ?

Radius est une propriété en CSS qui permet aux développeurs d'arrondir les coins des éléments. Il crée des bordures arrondies pour les éléments, les rendant plus beaux et plus modernes.

Comment utiliser le rayon ? L'attribut

radius accepte une ou deux valeurs :

• Valeur unique : Si une seule valeur est fournie, elle sera appliquée aux quatre coins de l'élément.
• Deux valeurs : La première valeur s'applique aux coins supérieur gauche et inférieur droit, tandis que la deuxième valeur s'applique aux coins supérieur droit et inférieur gauche.

Syntaxe :

<code class="css">element {
  border-radius: <值>;
}</code>

• <值> Peut être l'une des valeurs suivantes :

  • Valeur de longueur absolue (par exemple "10px" ou "1em")
  • Valeur en pourcentage (par exemple "20%")
  • Mot clé "hériter" (hériter de la valeur arrondie de l'élément parent)

Exemple :

Pour définir les quatre rayons des coins sur 10 pixels, utilisez le code suivant :

<code class="css">.element {
  border-radius: 10px;
}</code>

Pour définir les coins supérieurs gauche et droit Pour définir le rayon du coin inférieur sur 20 pixels et les coins supérieur droit et inférieur gauche sur 10 pixels, utilisez le code suivant :

<code class="css">.element {
  border-radius: 20px 10px;
}</code>

Navigateurs pris en charge :

L'attribut radius est largement pris en charge dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et Opera.

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!