`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.
Télécharger le schéma en SVG.

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

Ce module de spécification décrit deux moyens pour cacher partiellement ou totalement des portions d'éléments visuels : le masquage et le rognage.
Le masquage consiste à utiliser un autre élément graphique ou une image comme masque.
Le rognage décrit la région visible des éléments visuels. La région peut être décrite en utilisant certains éléments graphiques SVG ou des formes simples. Tout ce qui se trouve en dehors de cette région n'est pas rendu.

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 :