CSS mask-clip özelliği

Önceki sayfa mask
Sonraki sayfa 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;
}

Kendi kendine deneyin

CSS dilbilgisi

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

Özellik değeri

Değer	Açıklama
border-box	Çizilen içerik, kenar çizgisi kutusuna (border box) kesilir. Varsayılan değer.
content-box	Çizilen içerik, içerik kutusuna (content box) kesilir.
padding-box	Çizilen içerik, iç dolgu kutusuna (padding box) kesilir.
fill-box	Çizilen içerik, nesne sınırlayıcı kutusuna (object bounding box) kesilir.
stroke-box	Çizilen içerik, kenar çizgisi sınırlayıcı kutusuna (stroke bounding box) kesilir.
view-box	En yakın SVG görünüm kutusunu referans kutusu olarak kullanır.
no-clip	Kesim yapmaz.
border	border-box ile aynıdır.
padding	padding-box ile aynıdır.
content	content-box ile aynıdır.
text	Kaplama kesimini elementin metnine ayarlar.
initial	Bu özelliği varsayılan değerine ayarlar. bkz: initial.
inherit	Bu özelliği, ebeveyn elementinden miras alır. bkz: inherit.

Teknik ayrıntılar

Varsayılan değer:	border-box
Mirasçılık:	Hayır
Animasyon yapımı:	Desteklenmiyor. bkz:Animasyonla ilgili özellikler.
Sürüm:	CSS Masking Modülü 1
JavaScript dilbilgisi:	object.style.maskClip="padding-box"