Mfano wa mask-clip wa CSS

Nyuma zaidi mask
Pya zaidi 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;
}

Jifunze kufanya mafanikio yako

Inayofaa kwa KiCSS

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

Chaguo cha sababu

Wakati	Maelezo
border-box	Matokeo ya kumwambaa huzunika kwa maboko ya kifungu (border box). Chaguo cha kuzingatia cha kawaida.
content-box	Matokeo ya kumwambaa huzunika kwa maboko ya matokeo (content box).
padding-box	Matokeo ya kumwambaa huzunika kwa maboko ya kijinga (padding box).
fill-box	Matokeo ya kumwambaa huzunika kwa maboko ya kumwambaa (object bounding box).
stroke-box	Matokeo ya kumwambaa huzunika kwa maboko ya kifunguni (stroke bounding box).
view-box	Tumia SVG viewport ya hivi karibuni kama maboko ya kurejea.
hakuna-clip	Hakuna mawasiliano ya kumwambaa.
kifungu	Inayopatikana kama border-box.
kijinga	Inayopatikana kama padding-box.
matokeo	Inayopatikana kama content-box.
kitabia	Kuwa na maboko ya kumwambaa kwa matukio ya kitabia ya elementi.
initial	Kuwa na sababu hiyo kama chaguo cha kuzingatia. Tazama: initial.
inherit	Kuwa na uwezo wa kumwambia kwa kuzingatia sababu hiyo kutoka kwa elementi yake ya mababu. Tazama: inherit.

Mafanikio ya ujuzi

Chaguo cha kuzingatia:	border-box
Muungano:	Naelewa
Tengeneza animation:	Hakuna mawasiliano. Tazama:Mafano ya animation.
Mwaka:	CSS Masking Module Level 1
Inayofaa kwa KiJavaScript:	object.style.maskClip="padding-box"