Propriété mask-clip de CSS

Page précédente mask
Page suivante mask-composite

Définition et utilisation

mask-clip Cette propriété est utilisée pour spécifier la zone affectée par l'image de masque.

Exemple

Affichage mask-clip Les différentes valeurs de l'attribut :

.masked {
  width: 150px;
  height: 150px;
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 100% 100%
}
.mask1 {
  mask-clip: border-box;
}
.mask2 {
  mask-clip: content-box;
}
.mask3 {
  mask-clip: padding-box;
}
.mask4 {
  mask-clip: fill-box;
}
.mask5 {
  mask-clip: stroke-box;
}

Essayer vous-même

Syntaxe CSS

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

Valeur de l'attribut

Valeur	Description
border-box	Le contenu dessiné est coupé à la boîte de bord (border box). Valeur par défaut.
content-box	Le contenu dessiné est coupé à la boîte de contenu (content box).
padding-box	Le contenu dessiné est coupé à la boîte de marge (padding box).
fill-box	Le contenu dessiné est coupé à la boîte de contour de l'objet (object bounding box).
stroke-box	Le contenu dessiné est coupé à la boîte de contours (stroke bounding box).
view-box	Utilise le plus proche viewport SVG comme boîte de référence.
no-clip	Ne pas couper.
border	Identique à border-box.
padding	Identique à padding-box.
content	Identique à content-box.
text	Coupe le masque à la zone de texte de l'élément.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit	Inherits cette propriété de son élément parent. Voir : inherit.

Détails techniques

Valeur par défaut :	border-box
Héritabilité :	Non
Réalisation des animations :	Non pris en charge. Voir :Propriétés liées aux animations.
Version :	Module de masquage CSS Niveau 1
Syntaxe JavaScript :	object.style.maskClip="padding-box"