CSS mask-clip właściwość

Poprzednia strona mask
Następna strona 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;
}

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość	Opis
border-box	Zawartość rysowana jest przycinana do pętli krawędzi (border box). Domyślna wartość.
content-box	Zawartość rysowana jest przycinana do pętli zawartości (content box).
padding-box	Zawartość rysowana jest przycinana do pętli wewnętrznej (padding box).
fill-box	Zawartość rysowana jest przycinana do pętli obiektu (object bounding box).
stroke-box	Zawartość rysowana jest przycinana do pętli konturu (stroke bounding box).
view-box	Użyj najbliższego viewport SVG jako reference box.
no-clip	Nie przecinać.
border	Takie samo jak border-box.
padding	Takie samo jak padding-box.
content	Takie samo jak content-box.
text	Przeciąć maskę do tekstu elementu.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	border-box
Inheredność:	Nie
Tworzenie animacji:	Nie wspierane. Zobacz:Atrybuty związane z animacją.
Wersja:	Moduł Maskowania CSS Poziom 1
Język JavaScript:	object.style.maskClip="padding-box"