Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
mask-clip
Baseline 2023 *Newly available
Depuis December 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriétéCSSmask-clip définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.
/* 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-boxLa partie qui est peinte est rognée sur la boîte de contenu.
padding-boxLa partie qui est peinte est rognée sur la boîte de remplissage (padding).
border-boxLa partie qui est peinte est rognée sur la boîte de bordure.
margin-boxLa partie qui est peinte est rognée sur la boîte de marge.
fill-boxLa partie qui est peinte est rognée sur la boîte contenant l'objet.
stroke-boxLa partie qui est peinte est rognée sur la boîte contenant le contour.
view-boxC'est leviewport du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut
viewBoxest défini pour l'élément qui crée leviewport, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attributviewBoxet les dimensions de la boîte sont basées sur la hauteur et la largeur de l'attributviewBox.no-clipLa partie qui est peinte n'est pas rognée.
borderNon standardSynonyme de
border-box.paddingNon standardSynonyme de
padding-box.contentNon standardSynonyme de
content-box.textNon standardL'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 défini |
| 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 valeurmask-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 |