Mask-border - Propriété CSS
Résumé des caractéristiques de la propriété mask-border
Description de la propriété mask-border
.
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.

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
.
mask-border
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
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 2012Document de travail.26 Août 2014Candidat à 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 :