mask-border-outset

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La propriété CSS mask-border-outset définit la distance par laquelle la bordure de masque d'un élément est décalée par rapport à sa boîte de bordure.

Syntaxe

css

/* Valeur de type <length> */
mask-border-outset: 1rem;

/* Valeur de type <number> */
mask-border-outset: 1.5;

/* Décalage vertical | horizontal */
mask-border-outset: 1 1.2;

/* haut | horizontal | bas */
mask-border-outset: 30px 2 45px;

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

/* Valeurs globales */
mask-border-outset: inherit;
mask-border-outset: initial;
mask-border-outset: revert;
mask-border-outset: revert-layer;
mask-border-outset: unset;

La propriété mask-border-outset peut être utilisée avec une, deux, trois ou quatre valeurs. Chaque valeur peut être de type <length> ou <number>. Les valeurs négatives ne sont pas autorisées.

Si une valeur est indiquée, elle applique le même décalage aux quatre côtés.
Si deux valeurs sont indiquées, la première applique le décalage en haut et en bas, la seconde à gauche et à droite.
Si trois valeurs sont indiquées, la première applique le décalage en haut, la deuxième à gauche et à droite, la troisième en bas.
Si quatre valeurs sont indiquées, les décalages s'appliquent en haut, droite, bas et gauche dans cet ordre (sens horaire).

Valeurs

<length>: La distance, avec une dimension, pour le décalage du masque.
<number>: Le décalage du masque, exprimé comme un multiple de border-width.

Définition formelle

Valeur initiale	`0`
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ée	non
Valeur calculée	comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animation	discrète

Syntaxe formelle

mask-border-outset = 
  [ <length> | <number> ]{1,4}

Cette propriété ne semble pas encore être prise en charge nulle part. Lorsqu'elle sera prise en charge, elle permettra d'éloigner le masque du bord intérieur de la boîte de bordure de l'élément — vous pourrez l'utiliser pour faire démarrer le masque à mi-chemin de la bordure, plutôt qu'à l'intérieur de celle-ci.

css

mask-border-outset: 1rem;

Les navigateurs basés sur Chromium prennent en charge une version obsolète de cette propriété — mask-box-image-outset — avec un préfixe :

css

-webkit-mask-box-image-outset: 1rem;

Note : La page mask-border propose un exemple fonctionnel (utilisant les propriétés de masque de bordure préfixées et obsolètes prises en charge dans Chromium), afin que vous puissiez vous faire une idée de l'effet.