Attribut mask-origin CSS

Page précédente mask-mode
Page suivante mask-position

Définition et utilisation

mask-origin L'attribut spécifie la position d'origine de l'image de masquage (c'est-à-dire la zone de position de masquage).

Exemple

Exposition mask-origin Différentes valeurs de l'attribut :

.masked {
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask1 {
  mask-origin: border-box;
}
.mask2 {
  mask-origin: content-box;
}
.mask3 {
  mask-origin: padding-box;
}
.mask4 {
  mask-origin: fill-box;
}

Essayez-le vous-même

Syntaxe CSS

mask-origin: border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;

Valeur de l'attribut

Valeur	Description
border-box	Position par rapport à la boîte de contour. Valeur par défaut.
content-box	Position par rapport à la boîte de contenu.
padding-box	Position par rapport à la boîte interne.
fill-box	Position par rapport à la boîte de l'objet.
stroke-box	Position par rapport à la boîte de contour.
view-box	Utiliser le dernier viewport SVG comme cadre de référence.
initial	Régler cette propriété sur 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 :Attributs liés aux animations。
Version :	Module de masquage CSS Niveau 1
Syntaxe JavaScript :	object.style.maskOrigin="padding-box"