CSS mask-oorsprong eigenschap

Vorige pagina mask-mode
Volgende pagina mask-position

Definitie en gebruik

mask-origin De eigenschap specificeert de oorsprong van het maskeringsbeeld (dus het maskeringsgebied).

Voorbeeld

Weergave mask-origin Verschillende waarden van de eigenschap:

.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;
}

Probeer het zelf uit

CSS Syntax

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

Eigenschapswaarde

Waarde	Beschrijving
border-box	Positie ten opzichte van de randkaderbalk. Standaardwaarde.
content-box	Positie ten opzichte van de inhoudskaderbalk.
padding-box	Positie ten opzichte van de binnenrandkaderbalk.
fill-box	Positie ten opzichte van de objectkaderbalk.
stroke-box	Positie ten opzichte van de randkaderbalk.
view-box	Gebruik de dichtstbijzijnde SVG viewport als referentiekader.
initial	Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap overnemen van de ouderweergave. Raadpleeg inherit.

Technische details

Standaardwaarde:	border-box
Inheritantie:	Nee
Animatie maken:	Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS Masking Module Level 1
JavaScript Syntax:	object.style.maskOrigin="padding-box"