mask-border

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Propriétés détaillées correspondantes

Cette propriété est une propriété raccourcie pour les propriétés suivantes :

Syntaxe

css
/* 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 globales */
mask-border: inherit;
mask-border: initial;
mask-border: revert;
mask-border: unset;

Valeurs

<'mask-border-source'>

L'image source. Voir 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 mask-border-slice.

<'mask-border-width'>

La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir 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 mask-border-outset.

<'mask-border-repeat'>

Cette valeur indique 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 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 mask-border-mode.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments <defs> et des éléments graphiques
Héritéenon
Pourcentagespour chaque propriété individuelle de la propriété raccourcie :
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Crée un contexte d'empilementoui

Syntaxe formelle

mask-border = 
<'mask-border-source'> ||
<'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? ||
<'mask-border-repeat'> ||
<'mask-border-mode'>

<mask-border-source> =
none |
<image>

<mask-border-slice> =
[ <number> | <percentage> ]{1,4} fill?

<mask-border-width> =
[ <length-percentage> | <number> | auto ]{1,4}

<mask-border-outset> =
[ <length> | <number> ]{1,4}

<mask-border-repeat> =
[ stretch | repeat | round | space ]{1,2}

<mask-border-mode> =
luminance |
alpha

<image> =
<url> |
<gradient>

<length-percentage> =
<length> |
<percentage>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

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 :

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.

Spécifications

Specification
CSS Masking Module Level 1
# the-mask-border

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-border

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

Voir aussi