CSS właściwość mask-origin

Definicja i użycie

mask-origin Atrybut określa pierwotne położenie obrazu osłony (tj. obszar położenia osłony).

Przykład

Pokaz mask-origin Różne wartości atrybutu:

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

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
border-box Położenie względem otoczenia ramki. Domyślna wartość.
content-box Położenie względem obszaru treści.
padding-box Położenie względem wewnętrznej granicy.
fill-box Położenie względem granicy obiektu.
stroke-box Położenie względem otoczenia konturu granicy.
view-box Użyj najbliższego widoku SVG jako ramki odniesienia.
initial Ustawia tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Inherduje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: border-box
Inherdowanie: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty związane z animacjami.
Wersja: Moduł Masking CSS Poziom 1
Gramatyka JavaScript: object.style.maskOrigin="padding-box"

Obsługa przeglądarek

Tabela zawiera wersje przeglądarek, które w pełni obsługiwały tę właściwość.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Strony związane

Tutorial:CSS zasłona

Odniesienie:CSS właściwość mask

Odniesienie:CSS właściwość mask-clip

Odniesienie:CSS właściwość mask-composite

Odniesienie:CSS właściwość mask-image

Odniesienie:CSS właściwość mask-mode

Odniesienie:CSS właściwość mask-position

Odniesienie:CSS właściwość mask-repeat

Odniesienie:CSS właściwość mask-size

Odniesienie:CSS właściwość mask-type