Mask-border-repeat - Propriété CSS

Schéma de la syntaxe de mask-border-repeat.

Description de la propriété mask-border-repeat.

⚠

La propriété mask-border-repeat n'est pas encore prise en charge par les navigateurs. Il y a cependant une propriété non standard équivalente à mask-border-repeat sur presque tous les navigateurs : -webkit-mask-box-image-repeat. Sur Firefox   il n'y a pas d'équivalence.

Le masquage des bordures consiste à appliquer un masque sur la bordure de l'élément. Celui-ci est constitué de neuf zones : quatre pour les coins, quatre pour les bords, et une partie centrale pour le milieu de l'élément. Ce découpage est effectué par la propriété mask-border-slice.

Les parties relatives aux bords n'ont pas forcément les mêmes dimensions que l'élément. mask-border-repeat indique ce qu'il faut faire dans ces cas là : étirer, reproduire, etc. Voici un masque, les parties en foncé sont celles qui devront être agrandies ou reproduites pour s'adapter à la taille de l'élément. Les parties du masque relatives au coin n'ont pas à être changées.

Les zones du masques touchées
par mask-border-repeat.

Voici les propriétés qui jouent un rôle dans les masques de bordure :

Valeurs pour mask-border-repeat.

• mask-border-repeat: stretch;

  Avec la valeur stretch les parties du masque à agrandir sont étirées pour couvrir tout l'élément.

  
  
  mask-border-repeat:stretch;
-webkit-mask-box-image-repeat:stretch;
• mask-border-repeat: repeat;

  La valeur repeat provoque une répétition des parties concernées du masque. Il n'y a aucune mise à l'échelle du masque. Cela se voit sur notre exemple à la proximité des angles.

  
  
  mask-border-repeat:repeat;
-webkit-mask-box-image-repeat:repeat;
• mask-border-repeat: round;

  La valeur round répète les parties concernées du masque en ajustant leurs dimensions pour qu'il y ait un nombre entier de répétitions sur chaque bord de l'élément.

  
  
  mask-border-repeat:round;
-webkit-mask-box-image-repeat:round;
• mask-border-repeat: space;

  Enfin, la valeur space répète les parties du masque en ajoutant des espaces entre ces parties, lorsque les dimensions de l'élément ne sont pas un multiple exact des dimensions du masque. Ces espaces ajoutés sont transparents et font donc disparaître l'élément à ces endroits.

  
  
  mask-border-repeat:space;
-webkit-mask-box-image-repeat:space;
• mask-border-repeat: space stretch;

  Il est possible d'indiquer deux valeurs. La première pour les bords horizontaux, et la deuxième pour les bord verticaux.

  
  
  mask-border-repeat:space stretch;
-webkit-mask-box-image-repeat:space stretch;
• mask-border-repeat: initial; (stretch) mask-border-repeat: inherit; mask-border-repeat: revert; mask-border-repeat: revertLayer; mask-border-repeat: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de mask-border-repeat.

L'animation de la propriété mask-border-repeat est forcément discrete : la propriété acceptent des valeurs prédéfinies non numériques. Étant donné que la propriété standard n'est pas encore traitée par les navigateurs, nous avons dû utiliser la propriété non standard -webkit-mask-box-image-repeat. ⚠ Et sur Firefox les animations ne fonctionnent pas.

Exemple interactif avec la propriété mask-border-repeat.

Pour l'instant il n'y a que le propriété -webkit-mask-box-image-repeat qui fonctionne (et encore pas sur Firefox  ). Mais dans quelques temps on peut espérer que la propriété standard sera opérationnelle.

Compatibilité des navigateurs avec mask-border-repeat.

Les navigateurs ne traitent pas encore la technique de masquage des bordures (2025) de façon standard. Sur certains navigateurs, vous pouvez utiliser la propriété non standard -webkit-mask-box-image-repeat à la place de mask-border-repeat. Sur Firefox   il n'y a pas d'équivalence.

Remarques :

(1) Ces navigateurs ne connaissent pas la propriété mask-border-repeat. Utilisez -webkit-mask-box-image-repeat à la place.

1

Propriété
mask-border-repeat

Estimation de la prise en charge globale.

11%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

1

QQ Browser

Baidu Browser

Samsung Internet

1

Firefox

Androïd Brower

1

Firefox pour Androïd

Chrome pour Androïd

1

Chrome

1

Edge

1

Safari

Opéra

1

Safari sur IOS

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété mask-border-repeat.

• Module CSS - Masquage - Niveau 1

  Introduction de la propriété mask-border-repeat et des autres propriétés relatives aux masques de bordure.
  

  15 Novembre 2012

  Document de travail.

  

  26 Août 2014

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des techniques de masquage.

La spécification W3C qui standardise tout ce qui concerne le masquage ou le masquage des bordures s'appelle CSS Masking Module. La propriété mask-border-repeat y est décrite, ainsi que celles ci-dessous :

Propriétés :