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)
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 - Exemple pour mask-border
L'élément original
Le masque - Exemple pour mask-border


Le masque
L'élément original - Exemple pour mask-border
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.

1
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

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.
    WD
    15 Novembre 2012
    Document de travail.
    CR
    26 Août 2014
    Candidat à la recommandation.
    PR
    REC

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 :

Propriétés :

clip
Découpe un élément à partir d'un rectangle.
clip-path
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...).
clip-rule
Définit comment gérer les formes creuses dans le contexte d'un découpage.
mask
Propriété résumée définissant les paramètres de masquage : dimensions du masque, position, répétition, origine, etc.
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.
mask-clip
Définit la zone concernée par le masquage.
mask-composite
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
mask-image
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
mask-mode
Définit le mode de masquage (couche alpha, luminance...)
mask-origin
Définit la référence pour le positionnement du masque.
mask-position
Définit la position du masque.
mask-repeat
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
mask-size
Fixe les dimensions du masque.