Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
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:: CRD (document proposé pour 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 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).

1
mask-border
Estimation de la prise en charge en pourcentage du parc actuel.

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.

Propriétés.

Définit la partie visible de l'élément (découpage).
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
Définit comment gérer les formes creuses.
Résumé des paramètres de masquage.
Définit comment le masque doit agir (luminance, alpha).
Définit le décalage éventuel du masque de bordure éventuel par rapport à l'élément.
Définit le mode de répétition du masque.
Définit comment l'image utilisée comme masque doit être découpée.
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
Définit l'épaisseur de la bordure pour l'application d'un masque.
Définit la zone concernée par le masquage.
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Définit le mode de masquage (couche alpha, luminance...)
Définit la référence pour le positionnement du masque.
Position du masque.
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
Fixe les dimensions du masque.