From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/mask-border/index.md | 86 ++++++++++++++++++----------------- 1 file changed, 44 insertions(+), 42 deletions(-) (limited to 'files/fr/web/css/mask-border') diff --git a/files/fr/web/css/mask-border/index.md b/files/fr/web/css/mask-border/index.md index f2faaaf334..6b765250be 100644 --- a/files/fr/web/css/mask-border/index.md +++ b/files/fr/web/css/mask-border/index.md @@ -4,15 +4,16 @@ slug: Web/CSS/mask-border translation_of: Web/CSS/mask-border browser-compat: css.properties.mask-border --- -
{{cssref}}{{SeeCompatTable}}
+{{cssref}}{{SeeCompatTable}} -

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

+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.

+Cette propriété est une propriété [raccourcie](/fr/docs/Web/CSS/Shorthand_properties) 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](/fr/docs/Web/CSS/initial_value). -

Syntaxe

+## Syntaxe -
/* source | slice */
+```css
+/* source | slice */
 mask-border: url('border-mask.png') 25;
 
 /* source | slice | repeat */
@@ -23,49 +24,50 @@ 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

+``` + +### 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

+## Exemples -

Image matricielle (bitmap)

+### 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 :

+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 : -

+![](mask-border-diamonds.png) -

HTML

+#### HTML -
<div id="bitmap">
+```html
+

   Cet élément est entouré d'un masque de bordure
   matriciel. C'est pas mal.
-</div>
+ +``` -

CSS

+#### 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.

+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 {
+```css
+div {
   width: 200px;
   background-color: lavender;
   border: 18px solid salmon;
@@ -77,16 +79,16 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
     36px 18px    /* width */
     round;       /* repeat */
 }
-
+``` -

Résultat

+#### Résultat -

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

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

Spécifications

+## Spécifications -

{{Specifications}}

+{{Specifications}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat}}

\ No newline at end of file +{{Compat}} -- cgit v1.2.3-54-g00ecf