CSS mask-clip Eigenschaft

Definition und Verwendung

mask-clip Diese Eigenschaft wird verwendet, um den Bereich zu spezifizieren, den die Maskierungsdatei beeinflusst.

Beispiel

Anzeige mask-clip Different Werte der Eigenschaft:

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

Versuchen Sie es selbst

CSS-Syntax

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

Attributwert

Wert Beschreibung
border-box Das gezeichnete Inhalt wird auf den Umrandungsbox (border box) beschnitten. Standardwert.
content-box Das gezeichnete Inhalt wird auf den Inhaltsbox (content box) beschnitten.
padding-box Das gezeichnete Inhalt wird auf den Innenabstandbox (padding box) beschnitten.
fill-box Das gezeichnete Inhalt wird auf den Objektumrandbox (object bounding box) beschnitten.
stroke-box Das gezeichnete Inhalt wird auf den Umrandungsrandbox (stroke bounding box) beschnitten.
view-box Verwenden Sie den nächstgelegenen SVG-Bereich als Referenzbox.
no-clip Keine Beschnitten.
border Gleiche Bedeutung wie border-box.
padding Gleiche Bedeutung wie padding-box.
content Gleiche Bedeutung wie content-box.
text Die Maskenbeschnitten wird auf den Text des Elements angewendet.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: border-box
Vererbbarkeit: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Attribute.
Version: CSS Masking Module Level 1
JavaScript-Syntax: object.style.maskClip="padding-box"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome Edge Firefox Safari Oper
120 120 53 15.4 106

Verwandte Seiten

Tutorial:CSS-Abdeckung

Referenz:CSS mask Eigenschaft

Referenz:CSS mask-composite Eigenschaft

Referenz:CSS mask-image Eigenschaft

Referenz:CSS mask-mode Eigenschaft

Referenz:CSS mask-origin Eigenschaft

Referenz:CSS mask-position Eigenschaft

Referenz:CSS mask-repeat Eigenschaft

Referenz:CSS mask-size Eigenschaft

Referenz:CSS mask-type Eigenschaft