reference manual of CSS

rules in CSS

complete list of CSS properties

CSS bordure-droite CSS bordure-gauche-Propriété width

CSS3 bordure-Méthode d'utilisation et exemple de l'attribut radius

bordure-L'attribut radius définit les coins de l'élément en forme arrondie. C'estbordure-haut-gauche-rayon,bordure-haut-droite-rayon,bordure-bas-droite-rayonetbordure-bas-gauche-rayonAbréviation de l'attribut

Le tableau suivant explique l'utilisation et l'historique des versions de cet attribut, ainsi que la syntaxe d'utilisation de cet attribut dans les scripts JavaScript.

Valeur par défaut :	0
Appliqué à :	Tous les éléments
Héritage :	Non
Animable :	Est.Veuillez consulter Attributs d'animation.
Version :	CSS3nouvelle fonction
Syntaxe JavaScript :	object object.style.borderRadius="8px"

Attention :bordure-Même si la propriété de bordure n'est pas définie ou si sa valeur est définie sur none, cet attribut rend le fond de l'élément arrondi.

bordure-Syntaxe d'utilisation de radius

La syntaxe de cet attribut est la suivante :

bordure-rayon : [longueur | pourcentage]　1　à　4　values　
　\-------------------------------/
　　　　　　　　　　　　Premiers rayons
/　[longueur | pourcentage]　1　à　4　values | initial | inherit
　　　\------------------------------/
　　　　　　　　\"

Secondes radii (optionnelles)

Ce sigle peut être utilisé avec une, deux, trois ou quatre valeurs séparées par des espaces.Si spécifiéDeux valeurs
Si spécifiéLa première valeur est utilisée pour les coins supérieur gauche et inférieur droit, tandis que la deuxième valeur est utilisée pour les coins supérieur droit et inférieur gauche.Si spécifié
Si spécifiéTrois valeurs, la première valeur est utilisée pour le coin supérieur gauche, la deuxième valeur pour le coin supérieur droit et le coin inférieur gauche, et la troisième valeur pour le coin inférieur droit.
Si spécifiéQuatre valeursSi chaque valeur est spécifiée, elle est appliquée respectivement à l'angle supérieur gauche, supérieur droit, inférieur droit et inférieur gauche du bord.

Les exemples suivants montrent comment utiliser la bordure-propriété radius.

Exemple

　　div {
　　　bordure:　2px solid #f08080;
　　　bordure-rayon:　20px;
　　}

Essayez de voir‹/›

Attention :Deuxième valeur de longueur optionnelle (commençant par « /»Définit le rayon vertical de l'angle, donc la forme de l'angle est un quart d'ellipse. Si le deuxième longueur est omise ou égale au deuxième longueur, la forme de l'angle est un quart de cercle. Si l'un des longueurs est zéro, l'angle est carré plutôt qu'un coin arrondi.

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cette propriété.

Valeur	Description
length	Dans les valeurs de longueur px, pt, cm, em, etc., les valeurs négatives ne sont pas autorisées.
percentage	La taille du rayon, en pourcentage. Pour un angle elliptique, le pourcentage du rayon horizontal est calculé par rapport à la largeur de la boîte de l'élément, et le pourcentage du rayon vertical est calculé par rapport à la hauteur de la boîte de l'élément. Les valeurs négatives ne sont pas autorisées.
initial	Réinitialisez cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément lié utilise la bordure de son élément parent-Valeur de la propriété radius.

Compatibilité du navigateur

bordure-Compatibilité des navigateurs pour la propriété radius, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.

	Firefox 4+ Google Chrome4+ Internet Explorer 9+ Apple Safari 5+ Opera 10.5+

Attention : Internet Explorer 8et les versions antérieures ne prennent pas en charge cette bordure-Propriété radius. Dans IE9et les versions ultérieures sont prises en charge.

Lisez également

Voir la leçon :CSS Bordure,CSS3 Bordure.

Propriétés associées :bordure-bas-gauche-rayon,bordure-bas-droite-rayon,bordure-haut-gauche-rayon,bordure-haut-droite-rayon

CSS bordure-droite CSS bordure-gauche-Propriété width