CSS mask-clip egenskab

Forrige side mask
Næste side 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;
}

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi	Beskrivelse
border-box	Det tegnede indhold klippes til kantlinje-bounding box (border box). Standardværdi.
content-box	Det tegnede indhold klippes til indhold-bounding box (content box).
padding-box	Det tegnede indhold klippes til indrykning-bounding box (padding box).
fill-box	Det tegnede indhold klippes til objekt-bounding box (object bounding box).
stroke-box	Det tegnede indhold klippes til kantlinje-bounding box (stroke bounding box).
view-box	Brug den nærmeste SVG viewport som referenceboks.
no-clip	Udfør ikke klipning.
border	Samme som border-box.
padding	Samme som padding-box.
content	Samme som content-box.
text	Klipp mærket til elementets tekst.
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arver denne egenskab fra sin forældrelement. Se: inherit.

Tekniske detaljer

Standardværdi:	border-box
Arv:	Nej
Animation fremstilling:	Ikke understøttet. Se:Animation relaterede egenskaber.
Version:	CSS Masking Module Level 1
JavaScript syntaks:	object.style.maskClip="padding-box"