mask-border-slice

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété CSS mask-border-slice permet de découper l'image source, fournie par mask-border-source, en différentes régions. Ces régions sont utilisées pour former les composants du masque de la bordure.

Cette découpe permet d'obtenir neuf régions au total : quatre pour les coins, quatre pour les côtés et une région pour le centre. Cette découpe est effectuée selon 4 lignes qui sont écartées d'une certaine distance des bords de l'image.

The nine regions defined by the border-image or border-image-slice properties

Le diagramme ci-avant illustre l'emplacement de chaque région.

Les propriétés mask-border-repeat, mask-border-width et  mask-border-outset déterminent la façon dont ces régions sont utilisées pour construire le masque final.

Syntaxe

/* Une valeur pour tous les côtés */
mask-border-slice: 30%;

/* vertical | horizontal */
mask-border-slice: 10% 30%;

/* haut | horizontal | bas */
mask-border-slice: 30 30% 45;

/* haut | droit | bas | gauche */
mask-border-slice: 7 12 14 5; 

/* Utilisation du mot-clé `fill` */
mask-border-slice: 10% fill 7 12;

/* Valeurs globales */
mask-border-slice: inherit;
mask-border-slice: initial;
mask-border-slice: unset;

La propriété mask-border-slice peut être définie avec une, deux, trois ou quatre valeurs <number-percentage> qui représentent la distance entre le trait de coupe et le bord de l'image. Les valeurs négatives sont invalides et les valeurs supérieures à la dimension de l'image sur cet axe sont ramenées à 100%.

  • Lorsqu'une seule valeur est utilisée, les quatre traits de découpe se situent à la même distance de leurs côtés respectifs.
  • Lorsque deux valeurs sont utilisées, la première valeur indique la distance des traits de coupe pour le côté haut et bas et la deuxième indique la distance des traits de coupe pour le côté droit et gauche.
  • Lorsque trois positions sont utilisées, la première indique la distance pour le trait de coupe du côté haut, la deuxième indique la distance pour les traits de coupe des côtés droit et gauche et la troisième valeur indique la distance pour le trait de coupe par rapport au côté bas.
  • Si 4 valeurs sont employées, elles indiquent respectivement les distances des traits de coupe par rapport aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).

La valeur optionnelle fill peut être utilisée et placée à n'importe quel endroit de la déclaration.

Valeurs

<number>
Une valeur numérique représentant le décalage entre le trait de coupe et le bord de l'image. La valeur est exprimée en nombre de pixels pour les images matricielles (bitmap/raster) et en coordonnées pour les images vectorielles. Pour les images vecorielles, le nombre utilisé est relatif à la taille de l'élément et pas à la taille de l'image source. Dans ce dernier cas, il peut être préférable d'utiliser des valeurs en pourcentage.
<percentage>
Le décalage entre le trait de découpe et le bord de l'image, exprimé relativement à la taille de l'image source (pour les traits horizontaux, la distance est proportionnelle à la hauteur et pour les traits verticaux, la distance est proportionnelle à la largeur).
fill
La zone centrale est conservée ; sa largeur et sa hauteur correspondent aux dimensions utilisées pour les régions haute et gauche.

Syntaxe formelle

<number-percentage>{1,4} fill?


<number-percentage> = <number> | <percentage>

Spécifications

Spécification État Commentaires
CSS Masking Module Level 1
La définition de 'mask-border-slice' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Valeur initiale0
Applicabilitétous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments defs et des éléments graphiques
Héritéenon
Pourcentagesrefer to size of the mask border image
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

Compatibilité des navigateurs

TBD

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,