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é CSS mask-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-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
viewBoxest 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'attributviewBoxet les dimensions de la boîte sont basées sur la hauteur et la largeur de l'attributviewBox. no-clip-
La partie qui est peinte n'est pas rognée.
borderNon standard-
Synonyme de
border-box. paddingNon standard-
Synonyme de
padding-box. contentNon standard-
Synonyme de
content-box. textNon 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
Chargement…