Mask-border-outset - Propriété CSS

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

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

• length est une valeur numérique suivie d'une des unités de dimension.
• number est un nombre sans unité.

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

⚠

Le masquage des bordures n'est pas encore correctement pris en charge par les navigateurs. Il y a cependant une propriété non standard équivalente à mask-border-outset sur presque tous les navigateurs : -webkit-mask-box-image-outset. Sur Firefox   il n'y a pas d'équivalence.

Le masquage des bordures consiste à masquer le pourtour d'un élément à partir d'un masque. Il s'agit d'une image divisée en neuf zones : quatre pour les coins, quatre pour les bords et une une pour le centre de l'élément. Cette division est effectuée par mask-border-slice.

La propriété mask-border-outset indique de combien le masque doit être décalé à l'extérieur de la bordure de l'élément. La partie du masque qui, à cause de ce décalage, déborde de l'élément est tronquée.

mask-border-outset:0
(simulation)

mask-border-outset:10px
(simulation)

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

Valeurs pour mask-border-outset.

• mask-border-outset: 8px 5px 8px 20px; a b c d

  De une à quatre valeurs positives ou nulles, suivies d'une unité de dimensions. Le masque est décalé suivant les valeurs indiquées. En fonction du nombre de valeurs, on a la correspondance suivante :

  • Une seule valeur : elle indique le décalage par rapport chacun des côtés.
  • Deux valeurs : la première désigne le décalage par rapport aux bords horizontaux, la deuxième le décalage par rapport aux bords verticaux.
  • Trois valeurs : la première valeur est le décalage par rapport au bord haut, la deuxième par rapport bords droits et gauche et la dernière par rapport au bas.
  • Quatre valeurs : elles s'appliquent successivement aux décalages suivant les quatre côtés en commençant par le haut, et en tournant dans le sens des aiguilles d'une montre.
  
  Une seule valeur.

  
  Deux valeurs.

  
  Trois valeurs.

  
  Quatre valeurs.
• mask-border-outset: 1 2 2 1;

  Quatre nombres sans unités indiquent le rapport entre le décalage et l'épaisseur de la bordure. Les correspondances en fonction du nombre de valeurs sont les mêmes que précédemment.

• mask-border-outset: initial; (0) mask-border-outset: inherit; mask-border-outset: revert; mask-border-outset: revertLayer; mask-border-outset: unset;

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

Exemple d'animation de mask-border-outset.

Les animations ne fonctionnent pas sous Firefox  , et pour les autres navigateurs, nous avons utilisé la propriété non standard -webkit-mask-box-image-outset. Mais moyennant ces précautions, il est possible d'animer la propriété mask-border-outset. L'animation se fait de façon continue.

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

Compatibilité des navigateurs avec mask-border-outset.

Pour l'instant, les navigateurs ne traitent pas suffisamment la technique de masquage des bordures (2025). Sur certains navigateurs, vous pouvez utiliser la propriété non standard -webkit-mask-box-image-width en remplacement de mask-border-outset. Sur Firefox   il n'y a pas d'équivalence.

Remarques :

(1) Ces navigateurs ne supportent pas la propriété mask-border-outset. Utilisez la propriété non standard -webkit-mask-box-image-outset à la place.

1

Propriété
mask-border-outset

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

Firefox pour Androïd

Chrome

1

Edge

1

Safari

Opéra

1

Safari sur IOS

Androïd Brower

1

Chrome pour Androïd

1

KaiOS Browser

Opéra mini

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

Caniuse

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

• Module CSS - Masquage - Niveau 1

  Présentation des techniques de masquage des éléments et première introduction de la propriété mask-border-outset.
  

  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 ou le masquage des bordures s'appelle CSS Masking Module. La propriété mask-border-outset y est décrite, ainsi que celles ci-dessous :

Propriétés :