Manuel de référence CSS

règles CSS @

大全 des attributs CSS

CSS border-Propriété top CSS border-Propriété spacing

CSS border-Méthode d'utilisation et exemple de la propriété style

border-La propriété style CSS est utilisée pour définir une propriété de style de bordure unique, c'est-à-direborder-top-style，border-right-style，border-bottom-styleetborder-left-stylePropriété abrégée.

Le tableau suivant décrit l'utilisation et l'historique des versions de cette propriété, ainsi que la syntaxe de son utilisation dans les scripts JavaScript.

Valeur par défaut :	none
Applicable à :	Tous les éléments
Héritage :	Non
Animable :	Non.Voir aussi Propriétés d'animation。
Version :	CSS 1，2，3
Syntaxe JavaScript :	object object.style.borderStyle="dotted double"

border-Syntaxe de l'utilisation de style

La syntaxe de cette propriété est la suivante :

border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]　1　to　4　values | initial | inherit

Ce raccourci peut être utilisé avec une, deux, trois ou quatre valeurs séparées par des espaces.

Si une valeur est spécifiéeUne valeurLa valeur s'applique à toutes les quatre bordures.
Si une valeur est spécifiéeDeux valeursLa première valeur s'applique aux bordures supérieure et inférieure, tandis que la deuxième valeur s'applique aux bordures droite et gauche.
Si une valeur est spécifiéeTrois valeursLa première valeur s'applique à la bordure supérieure, la deuxième valeur s'applique aux bordures latérales, et la troisième valeur s'applique à la bordure inférieure.
Si une valeur est spécifiéeQuatre valeursSi une valeur est spécifiée, chaque valeur est appliquée dans l'ordre suivant : haut, droite, bas et gauche à la bordure.

Les exemples suivants montrent comment utiliser border-Propriété de style.

Exemple

　　p {
　　　border-style: double;
　　　border-largeur:　5px;
　　}

Vérifiez pour voir‹/›

Valeur de propriété

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

Valeur	Description
none	Aucune bordure visible.
hidden	Comme le none, mais à la différence que les cellules de tableau ontBordure repliéeEt deux cellules partagent une bordure. La valeur hidden assure que la bordure n'est pas dessinée, car hidden a la priorité sur tous les autres styles de bordure.
dotted	Affiche la bordure comme une série de points.
dashed	Affiche la bordure comme une série de segments de ligne courts, c'est-à-dire des tirets.
solid	Affiche la bordure comme une ligne continue.
double	Affiche la bordure comme deux lignes parallèles continues, avec un certain espace entre elles. La somme des deux lignes et l'espace entre elles égaleborder-widthde la valeur.
groove	Affiche une bordure gravée dans le canevas. Il donne une impression de3L'impression de D, généralement réalisé en utilisant une couleur plus claire que la couleur de la bordureborder-colorde deux couleurs plus claires et plus sombres créées pour créer l'ombre.
ridge	Affiche une bordure groove en sens inverse de l'effet. Il donne également une3L'impression de D, la bordure semble sortir du canevas.
inset	Affiche une bordure qui rend la boîte de l'élément comme si elle était intégrée au canevas. Il donne une impression de3D, cela est généralement réalisé en créant une ombre de deux couleurs, plus claires que la couleur de la bordure.border-colorun peu plus clair et plus foncé.
outset	Affiche une bordure inset en sens inverse de l'effet. Il donne également une3L'impression de D, la bordure rend la boîte comme si elle sortait du canevas.
inherit	Si spécifié, l'élément lié utilise la bordure de l'élément parent-top-Valeur de propriété de style

Compatibilité du navigateur

border-Compatibilité du navigateur pour la propriété style, 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é.

	Prise en charge du navigateur - Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+

Avertissement : Internet Explorer 7et les versions antérieures ne prennent pas en charge la valeur hidden. IE8Prend en charge, mais nécessite un<!DOCTYPE>。IE9et les versions supérieures prennent en charge cette valeur hidden.

Lire la suite

Voir la tutoriel :CSS Border，CSS3 Border。

Propriétés associées :border，border-width，border-color，border-top-style，border-right-style，border-bottom-style，border-left-style。