Mask-border - Propriété CSS

mask-border

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

Description rapide

Définit tous les paramètres d'un masque pour la bordure d'un élément.

Statut

Standard

Utilisable sur

HTML, SVG

Pourcentages

Ne s'appliquent pas.

Valeur initiale

Voir les propriétés individuelles.

Héritée par défaut

Non.

Type d'animation

Voir les propriétés individuelles.

Module W3C

Module CSS - Masquage

Références (W3C)

CSS Masking Module Level 1

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

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

⚠

Toutes les propriétés relatives au masquage par bordure, ainsi que la technique de masquage par bordure elle-même, sont mal reconnues par les navigateurs actuels (2022). Il est trop tôt pour utiliser cette technique.

La propriété mask-border est une propriété raccourcie qui définit tous les paramètres de masquage par bordure.

La différence entre le masquage par bordure et le masquage classique (voir la propriété mask) réside dans la façon dont le masque s'adapte aux dimensions de l'élément à masquer : avec un masquage classique on ne peut que répéter ou agrandir le masque afin de lui faire couvrir tout l'élément à masquer. mask-border permet de définir un masque pour chaque angle, un pour chaque côté, et enfin un pour l'intérieur de l'élément. Chacun de ces masques partiels pouvant s'agrandir ou se répéter pour couvrir la surface de l'élément masqué.

Toutes ces parties de masque sont regroupée en une seule image, divisée en 9 parties, pas nécessairement de mêmes dimensions.

Exemple d'un masque pour la propriété mask-border

L'élément original

Le masque

Le résultat

Reportez-vous aux propriétés individuelles pour une explication plus détaillée de chacun des paramètres :

mask-border-mode : Définit sur quel paramètre le masque doit agir (luminance, alpha).
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-slice : Définit comment l'image utilisée comme masque doit être découpée.
mask-border-source : Désigne l'image qui sera utilisée comme masque (masque du type bordure).
mask-border-width : Définit l'épaisseur de la bordure pour l'application d'un masque.

Compatibilité des navigateurs avec `mask-border`.

Pour l'instant, les navigateurs ne traitent pas suffisamment la technique de masquage par bordure (2023).

Remarques :

(1) Utilise la propriété non standard -webkit-mask-box-image.

Propriété
mask-border

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

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

Caniuse

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

Module CSS - Masquage - Niveau 1

Introduction des techniques de masquage par image. Et première définition des propriétés correspondantes dont la propriété mask-border.

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 CSS Masking Module (Module CSS - Masquage). Il décrit la propriété mask-border et les propriétés ci-dessous :