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-image-slice/index.html | 132 +++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/fr/web/css/border-image-slice/index.html (limited to 'files/fr/web/css/border-image-slice') diff --git a/files/fr/web/css/border-image-slice/index.html b/files/fr/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..35136b7f07 --- /dev/null +++ b/files/fr/web/css/border-image-slice/index.html @@ -0,0 +1,132 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

La propriété border-image-slice permet de découper l'image fournie via la propriété {{cssxref("border-image-source")}} en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image.

+ +
{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
+ + + +

Les 9 zones définies par border-image-slice

+ +

Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe).

+ +

La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé fill. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs).

+ +

Les propriétés {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} définissent la façon dont ces images seront utilisées.

+ +

La propriété raccourcie {{cssxref("border-image")}} peut éventuellement réinitialiser cette propriété avec sa valeur par défaut.

+ +

Syntaxe

+ +
/* border-image-slice :                       */
+/* Une valeur qui s'applique aux quatre côtés */
+border-image-slice: 30%;
+
+/* border-image-slice :                */
+/* Première valeur : côtés verticaux   */
+/* Deuxième valeur : côtés horizontaux */
+border-image-slice: 10% 30%;
+
+/* border-image-slice :                */
+/* Première valeur : côté haut         */
+/* Deuxième valeur : côtés horizontaux */
+/* Troisième valeur : côté bas         */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice :           */
+/* Première valeur : côté haut    */
+/* Deuxième valeur : côté droit   */
+/* Troisième valeur : côté bas    */
+/* Quatrième valeur : côté gauche */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill          */
+/* Le mot-clé fill peut être intercalé */
+/* à n'importe quel endroit            */
+border-image-slice: 10% fill 7 12;
+
+/* Valeurs globales */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

Valeurs

+ +
+
slice
+
Une valeur de type {{cssxref("<number>")}} ou {{cssxref("<percentage>")}} qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type {{cssxref("<length>")}} n'est pas autorisée et est donc invalide. Une valeur de type {{cssxref("<number>")}} correspondra à des pixels pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type {{cssxref("<percentage>")}} sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à 100%. Il est préférable d'utiliser des pourcentages pour les images vectorielles.
+
fill
+
Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
p {
+ border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+ border-image-slice: 30;
+ border-image-width: 20px;
+ border-image-repeat: round;
+ padding: 40px;
+}
+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '480', '320')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.border-image-slice")}}

+ +

Voir aussi

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