CSS mask-origin özelliği

Önceki sayfa mask-mode
Sonraki sayfa mask-position

Tanım ve Kullanım

mask-origin Özellik, mask layer image'inin başlangıç konumunu (yani mask position alanı) belirtir.

Örnek

Görünüm mask-origin Özelliklerin Farklı Değerleri:

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

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer	Açıklama
border-box	Konum, çerçeve çubuğu盒ine göre yerleştirilir. Varsayılan Değer.
content-box	Konum, içerik çubuğu盒ine göre yerleştirilir.
padding-box	Konum, iç çerçeve çubuğu盒ine göre yerleştirilir.
fill-box	Konum, nesne sınırları çubuğu盒ine göre yerleştirilir.
stroke-box	Konum, çizim sınırları çubuğu盒ine göre yerleştirilir.
view-box	En yakın SVG görüntü çerçevesini referans çubuğu olarak kullanır.
initial	Bu özelliği varsayılan değerine ayarlar. Bakın: initial.
inherit	Bu özelliği ebeveyn elemanından miras alır. Bakın: inherit.

Teknik Ayrıntılar

Varsayılan Değer:	border-box
Miras:	Hayır
Animasyon Yapımı:	Desteklenmiyor. Aşağıdaki gibi bakın:Animasyon İle İlgili Özellikler.
Sürüm:	CSS Masking Modülü 1
JavaScript Dilbilgisi:	object.style.maskOrigin="padding-box"