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éCSSmask-border-outset définit la distance par laquelle labordure 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.

Siune valeur est indiquée, elle applique le même décalage auxquatre côtés.
Sideux valeurs sont indiquées, la première applique le décalage enhaut et en bas, la seconde àgauche et à droite.
Sitrois valeurs sont indiquées, la première applique le décalage enhaut, la deuxième àgauche et à droite, la troisième enbas.
Siquatre valeurs sont indiquées, les décalages s'appliquent enhaut,droite,bas etgauche 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 deborder-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 défini, 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 pagemask-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.