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/mask-border/index.html | 114 ++++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 files/fr/web/css/mask-border/index.html (limited to 'files/fr/web/css/mask-border/index.html') diff --git a/files/fr/web/css/mask-border/index.html b/files/fr/web/css/mask-border/index.html new file mode 100644 index 0000000000..4695440d10 --- /dev/null +++ b/files/fr/web/css/mask-border/index.html @@ -0,0 +1,114 @@ +--- +title: mask-border +slug: Web/CSS/mask-border +tags: + - CSS + - Experimental + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/mask-border +--- +
{{cssref}}{{SeeCompatTable}}
+ +

La propriété CSS mask-border permet de créer un masque le long de la bordure d'un élément.

+ +

Cette propriété est une propriété raccourcie pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur valeur initiale.

+ +

Syntaxe

+ +
/* source | slice */
+mask-border: url('border-mask.png') 25;
+
+/* source | slice | repeat */
+mask-border: url('border-mask.png') 25 space;
+
+/* source | slice | width */
+mask-border: url('border-mask.png') 25 / 35px;
+
+/* source | slice | width | outset | repeat | mode */
+mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
+
+ +

Valeurs

+ +
+
<'mask-border-source'>
+
L'image source, pour plus d'informations, voir {{cssxref("mask-border-source")}}.
+
<'mask-border-slice'>
+
Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-slice")}}.
+
<'mask-border-width'>
+
La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-width")}}.
+
<'mask-border-outset'>
+
La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-outset")}}.
+
<'mask-border-repeat'>
+
Cette valeur indiique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir {{cssxref("mask-border-repeat")}}.
+
<'mask-border-mode'>
+
Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir {{cssxref("mask-border-mode")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Image matricielle (bitmap)

+ +

Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :

+ +

+ +

HTML

+ +
<div id="bitmap">
+  Cet élément est entouré d'un masque de bordure
+  matriciel. C'est pas mal.
+</div>
+ +

CSS

+ +

Pour avoir un seul losange, on divise le carré en 3 (avec la valeur 30). On utilise la valeur round pour que le masque soit réparti également de part et d'autre.

+ +
div {
+  width: 200px;
+  background-color: lavender;
+  border: 18px solid salmon;
+  padding: 10px;
+
+  mask-border:
+    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
+    30 /         /* slice */
+    36px 18px    /* width */
+    round;       /* repeat */
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Image_matricielle_(bitmap)")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentairezs
{{SpecName("CSS Masks", "#propdef-mask-border", "mask-border")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateursEdit

+ +

TBD

-- cgit v1.2.3-54-g00ecf