CSS mask-knip eigenschap

Vorige pagina mask
Volgende pagina mask-composite

定义和用法

mask-clip 属性用于指定遮罩图像影响的区域。

实例

展示 mask-clip 属性的不同值：

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

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Waarde	Beschrijving
border-box	Het weergegeven inhoud wordt afgesneden tot de randbox (border box). Standaardwaarde.
content-box	Het weergegeven inhoud wordt afgesneden tot de inhoudsbox (content box).
padding-box	Het weergegeven inhoud wordt afgesneden tot de binnenste marges van de lijst (padding box).
fill-box	Het weergegeven inhoud wordt afgesneden tot de objectcontouren (object bounding box).
stroke-box	Het weergegeven inhoud wordt afgesneden tot de randcontouren van de lijst (stroke bounding box).
view-box	Gebruik de dichtstbijzijnde SVG viewport als referentielijst.
no-clip	Geen snijden.
border	Gelijk aan border-box.
padding	Gelijk aan padding-box.
content	Gelijk aan content-box.
text	Snijd de maskering af tot de tekst van het element.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap wordt van de ouderlijke element overgenomen. Raadpleeg inherit.

Technische details

Standaardwaarde:	border-box
Inheritantie:	Nee
Animatieproductie:	Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS Masking Module Level 1
JavaScript syntaxis:	object.style.maskClip="padding-box"