Mask-border-slice - Propriété CSS

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

Description des termes utilisés sur le schéma :

• number est un nombre sans unité.
• % un pourcentage calculé par rapport à la largeur ou la hauteur de l'élément.

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

⚠

La propriété mask-border-slice est pour l'instant mal reconnue par les navigateurs. Il y a parfois une propriété équivalente : -webkit-mask-box-slice, comme comme sur Chrome  , Edge   ou Opera  , mais sur Firefox   il n'y a pas d'équivalence.

Les masques de bordure consistent à masquer la bordure d'un élément à partir d'une image appelée le masque. Le fonctionnement est comparable au masque classique mais c'est dans la façon de répéter le masque qu'il y a une différence.

La propriété mask-border-slice définit comment découper le masque pour constituer neuf parties, qui seront utilisées, pour quatre d'entre elles, pour masquer les angles de l'élément, pour quatre autres, pour masquer les côtés, et la partie centrale pour le centre de l'élément. Ces parties ne sont pas forcément de dimensions identiques. Les parties utilisées pour les côtés pourront être agrandies ou répétées pour couvrir la longueur du côté (voir mask-border-repeat).

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

Valeurs pour mask-border-slice.

• mask-border-slice: 120 110 115 130; a b c d

  De un à quatre nombres sans unités, ou des pourcentages. Ils représentent la distance depuis le bord haut, le bord droit, le bas et le bord gauche du masque. Ce qui divise le masque en neuf parties : quatre pour les angles, quatre pour les bords et la partie centrale pour le milieu de l'élément.

  S'il n'y a qu'une seule valeur, elle s'applique aux 4 dimensions. Avec deux valeurs, la première s'applique au haut et au bas du masque, la seconde au bord droit et au bord gauche. Avec 3 valeurs, le haut est fixé à la premiere valeur, les bord droit et gauche à la deuxième, et le bas à la troisième. Enfin, avec 4 valeurs, elles s'appliquent comme indiqué ci-dessous.

  
  Une valeur.

  
  Deux valeurs.

  
  Trois valeurs.

  
  Quatre valeurs.

  S'il s'agit de pourcentages, ils sont calculés par rapport à la largeur du masque pour les valeurs b et d, et à la hauteur pour les deux autres valeurs. Donc les valeurs verticales sont calculées par rapport à la hauteur, et les valeurs horizontales par rapport à la largeur.

• mask-border-slice: 120 110 115 130 fill;

  Ce dernier paramètre (fill) indique comment doit se comporter la partie centrale. Si fill et indiqué, la partie centrale du masque agit sur le centre de l'élément. Dans le cas contraire, la partie centrale de l'élément n'est pas affichée.

  
  Avec fill.
  (simulation)

  
  Sans fill.
  (simulation)
• mask-border-slice: initial; (0) mask-border-slice: inherit; mask-border-slice: revert; mask-border-slice: revertLayer; mask-border-slice: unset;

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

Exemple d'animation de mask-border-slice.

Les animations ne fonctionnent pas sous Firefox  , et pour les autres navigateurs, nous avons utilisé la propriété non standard -webkit-mask-box-image-slice.

Masque utilisé pour les animations.

La première animation est faite sur les paramètres numériques. la deuxième fait intervenir le dernier paramètre (fill). On constate que faire intervenir ce paramètre dans une animation rend celle-ci discrete.

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

Le masque est ici appliqué sur un élément contenant du texte. Voici le masque, la valeur naturelle pour slice est 20. La partie centrale du maque est semi-transparente.

Compatibilité des navigateurs avec mask-border-slice.

Pour l'instant, les navigateurs ne traitent pas suffisamment la technique de masquage par bordure (2025). Firefox   en particulier est à la traîne. Sur les autres navigateurs, vous pouvez utiliser la propriété -webkit-mask-box-image-slice en remplacement de mask-border-slice.

1

Propriété
mask-border-slice

Estimation de la prise en charge globale.

13%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Samsung Internet

Firefox

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

Chrome

Edge

Opéra

KaiOS Browser

Opéra mini

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

Caniuse

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

• Module CSS - Masquage - Niveau 1

  Concernant mask-border-slice. Introduction de la propriété mask-border-slice, ainsi que de toutes celles qui concernent les marques 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 qui standardise tout ce qui concerne le masquage s'appelle Module CSS - Masquage (Module CSS - Masquage). Il décrit la propriété mask-border-slice et les propriétés ci-dessous :

Propriétés :