CSS - Propriété mask-border
Description de la propriété mask-border
.
La propriété mask-border
est expérimentale. Avant de l'utiliser, vérifier sa compatibilité avec les
navigateurs actuels, et si nécessaire, n'hésitez pas à utiliser les préfixes spécifiques à chaque navigateur
(-moz-
, -webkit-
, etc.).
La propriété mask-border
est une propriété raccourcie qui définit tous les paramètres
de masquage par bordure.
La différence avec 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.
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
:mask-border-outset
:mask-border-repeat
:mask-border-slice
:mask-border-source
:mask-border-width
:
Prise en charge par les navigateurs (compatibilité).
Afficher le tableau de compatibilité (informations fournies par canIuse.com).