diff options
Diffstat (limited to 'files/fr/web/css/border-left-style/index.html')
-rw-r--r-- | files/fr/web/css/border-left-style/index.html | 36 |
1 files changed, 3 insertions, 33 deletions
diff --git a/files/fr/web/css/border-left-style/index.html b/files/fr/web/css/border-left-style/index.html index ad7a1c9fb9..3bb7d560f3 100644 --- a/files/fr/web/css/border-left-style/index.html +++ b/files/fr/web/css/border-left-style/index.html @@ -13,9 +13,9 @@ translation_of: Web/CSS/border-left-style <div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -46,73 +46,43 @@ border-left-style: unset; <tbody> <tr> <td><code>none</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: none; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>hidden</code> : 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 <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td> </tr> <tr> <td><code>hidden</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: hidden; background-color: palegreen;"> </div> - </td> <td>L'effet obtenu est le même qu'avec <code>none</code> : 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 <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td> </tr> <tr> <td><code>dotted</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dotted; background-color: palegreen;"> </div> - </td> <td>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")}}.</td> </tr> <tr> <td><code>dashed</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dashed; background-color: palegreen;"> </div> - </td> <td>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.</td> </tr> <tr> <td><code>solid</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: solid; background-color: palegreen;"> </div> - </td> <td>Affiche une ligne droite continue.</td> </tr> <tr> <td><code>double</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: double; background-color: palegreen;"> </div> - </td> <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.</td> </tr> <tr> <td><code>groove</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: groove; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td> </tr> <tr> <td><code>ridge</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: ridge; background-color: palegreen;"> </div> - </td> <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td> </tr> <tr> <td><code>inset</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: inset; background-color: palegreen;"> </div> - </td> <td>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 <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td> </tr> <tr> <td><code>outset</code></td> <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: outset; background-color: palegreen;"> </div> - </td> - <td> <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p> </td> </tr> |