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.

* Some parts of this feature may have varying levels of support.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-clip
border
Non-standard
content
Non-standard
padding
Non-standard
text
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi