`Mask-border-mode` - Propriété CSS

mask-border-mode

mask-border

Résumé des caractéristiques de la propriété `mask-border-mode`

Description rapide

Définit sur quel paramètre le masque doit agir (luminance, alpha).

Statut

Problèmes de compatibilité ⚠

S'applique à

HTML : tous les éléments.
SVG : conteneurs sauf defs, éléments graphiques, use.

Utilisable sur

HTML, SVG

Valeurs prédéfinies

alpha | luminance

Pourcentages

Ne s'appliquent pas.

Valeur initiale

alpha

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété mask-border-mode passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Masquage

Références (W3C)

CSS Masking Module Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de `mask-border-mode`.

Schéma syntaxique de la propriété mask-border-mode.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété `mask-border-mode`.

⚠

Le masquage des bordures est mal pris en charge par les navigateurs. Il y a parfois une propriété équivalente à mask-border-mode : -webkit-mask-box-image-mode, mais sur Firefox

il n'y a pas d'équivalence.

Cette page sera prochainement complétée.

Le masquage des bordures est une opération qui consiste à maquer le pourtour d'un élément à partir d'un masque qui est le souvent une image. Celle-ci est divisée en neuf zones: quatre pour les coins, quatre pour les bords et une une pour le centre de l'élément.

La propriété mask-border-mode indique si le masque agit par son canal alpha (la transparence) ou par sa luminance.

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

mask-border :

Propriété résumée. Définit tous les paramètres d'un masque pour la bordure d'un élément.

mask-border-source :

Désigne l'image qui sera utilisée comme masque (masque du type bordure).

mask-border-slice :

Définit comment l'image utilisée comme masque doit être découpée.

mask-border-width :

Définit l'épaisseur de la bordure pour l'application d'un masque.

mask-border-outset :

Définit le décalage éventuel du masque de bordure par rapport à l'élément.

mask-border-repeat :

Définit le mode de répétition du masque.

mask-border-mode :

Définit sur quel paramètre le masque doit agir (luminance, alpha).

Valeurs pour `mask-border-mode`.

mask-border-mode: alpha;

C'est le canal alpha (la transparence du masque) qui est utilisé pour maquer ou non l'élément.
mask-border-mode: luminance;

Avec la valeur luminance, c'est la luminance du masque qui est utilisée pour masquer ou non l'élément.
mask-border-mode: initial; (alpha) mask-border-mode: inherit; mask-border-mode: revert; mask-border-mode: revertLayer; mask-border-mode: unset;

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

Exemple d'animation de `mask-border-mode`.

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

Exemple interactif avec la propriété `mask-border-mode`.

mask-border-mode :

alpha

luminance

-webkit-mask-box-image-mode :

alpha

luminance

Ceci est un texte avec une bordure très épaisse pour démontrer l'usage des masques de bordure.

Compatibilité des navigateurs avec `mask-border-mode`.

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é -webkit-mask-box-image-mode en remplacement de mask-border-mode. Sur Firefox il n'y a pas d'équivalence.

Histoire de la propriété `mask-border-mode`.

Module CSS - Masquage - Niveau 1

Concernant mask-border-mode. Introduction de la propriété mask-border-mode dans cette première version de la spécification.

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). La propriété mask-border-mode y est décrite, ainsi que celles ci-dessous :