From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/border-left-style/index.html | 228 ++++++++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 files/fr/web/css/border-left-style/index.html (limited to 'files/fr/web/css/border-left-style/index.html') diff --git a/files/fr/web/css/border-left-style/index.html b/files/fr/web/css/border-left-style/index.html new file mode 100644 index 0000000000..f677494c11 --- /dev/null +++ b/files/fr/web/css/border-left-style/index.html @@ -0,0 +1,228 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-left-style +--- +
{{CSSRef}}
+ +

La propriété border-left-style définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte.

+ +
{{EmbedInteractiveExample("pages/css/border-left-style.html")}}
+ + + +
Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+border-left-style: none;
+border-left-style: hidden;
+border-left-style: dotted;
+border-left-style: dashed;
+border-left-style: solid;
+border-left-style: double;
+border-left-style: groove;
+border-left-style: ridge;
+border-left-style: inset;
+border-left-style: outset;
+
+/* Valeurs globales */
+border-left-style: inherit;
+border-left-style: initial;
+border-left-style: unset;
+
+ +

Valeurs

+ +
+
<br-style>
+
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
 
+ 		L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.
hidden +
 
+ 		L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.
dotted +
 
+ 		Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-left-width")}}.
dashed +
 
+ 		Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
solid +
 
+ 		Affiche une ligne droite continue.
double +
 
+ 		Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.
groove +
 
+ 		La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridge +
 
+ 		La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
inset +
 
+ 		La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
outset +
 
+ 		+

La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.

+
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-left-style */
+.b1 {border-left-style:none;}
+.b2 {border-left-style:hidden;}
+.b3 {border-left-style:dotted;}
+.b4 {border-left-style:dashed;}
+.b5 {border-left-style:solid;}
+.b6 {border-left-style:double;}
+.b7 {border-left-style:groove;}
+.b8 {border-left-style:ridge;}
+.b9 {border-left-style:inset;}
+.b10 {border-left-style:outset;}
+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">petits points</td>
+    <td class="b4">tirets</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 300, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification significative.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.border-left-style")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf