mask-clip

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La propriété CSS mask-clip définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.

css
/* Valeurs de type <geometry-box> */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/* Valeurs avec un mot-clé */
mask-clip: no-clip;

/* Mots-clés non-standards */
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/* Valeurs multiples */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

/* Valeurs globales */
mask-clip: inherit;
mask-clip: initial;
mask-clip: revert;
mask-clip: unset;

Syntaxe

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

Valeurs

content-box

La partie qui est peinte est rognée sur la boîte de contenu.

padding-box

La partie qui est peinte est rognée sur la boîte de remplissage (padding).

border-box

La partie qui est peinte est rognée sur la boîte de bordure.

margin-box

La partie qui est peinte est rognée sur la boîte de marge.

fill-box

La partie qui est peinte est rognée sur la boîte contenant l'objet.

stroke-box

La partie qui est peinte est rognée sur la boîte contenant le contour.

view-box

C'est le viewport du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut viewBox est défini pour l'élément qui crée le viewport, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut viewBox et les dimensions de la boîte sont basées sur la hauteur et la largeur de l'attribut viewBox.

no-clip

La partie qui est peinte n'est pas rognée.

border Non-standard

Synonyme de border-box.

padding Non-standard

Synonyme de padding-box.

content Non-standard

Synonyme de content-box.

text Non-standard

L'image est rognée selon la forme du texte de l'élément.

Définition formelle

Valeur initialeborder-box
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
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

mask-clip = 
[ <coord-box> | no-clip ]#

<coord-box> =
<paint-box> |
view-box

<paint-box> =
<visual-box> |
fill-box |
stroke-box

<visual-box> =
content-box |
padding-box |
border-box

Exemples

Vous pouvez modifier la valeur mask-clip dans l'exemple qui suit. Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de -webkit-mask-clip.

Spécifications

Specification
CSS Masking Module Level 1
# the-mask-clip

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi