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 initiale	`border-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ée	non
Valeur calculée	comme spécifié
Type d'animation	discrè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

Rognage et masquage en CSS (en anglais)