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

BCD tables only load in the browser

Voir aussi