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 comment le masque doit agir (luminance, alpha).mask-border-outset
: Définit le décalage éventuel du masque de bordure éventuel 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.
Prise en charge par les navigateurs (compatibilité).
Pour l'instant, les navigateurs ne traitent pas suffisamment la technique de masquage par bordure (2023).
mask-border
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que mask-border
.
Les spécifications CSS éditées par le W3C sont organisées en modules. mask-border
fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.