CSS/Eigenschaften/mask-clip

Browserunterstützung
caniuse.com

Die Eigenschaft mask-clip legt die Maskenfläche fest

Erlaubte Werte

• no-clip: keine Maskenfläche
• geometry-box:
  • margin-box: Box mitsamt durch margin festgelegten Außenabständen. Sind für eine Box keine Außenabstände definiert, so ist die Außenkante mit der Rahmenkante identisch.
  • border-box: (Rahmenbox) Box, die content-box, einen möglichen Innenabstand und die durch border festgelegten Rahmen umfasst. Besitzt eine Box keinen Rahmen, so ist die Rahmenbox mit der Polsterungsbox identisch.
  • padding-box: (Polsterungsbox) Bereich, der content-box und padding (Innenabstand) umfasst. Besitzt eine Seite keinen Innenabstand, so ist die Polsterungskante mit der Innenkante identisch.
  • content-box: (Inhaltsbox) Bereich, der durch den Inhalt oder die Eigenschaften width und height festgelegt wurde.

Siehe auch Box-Modell#Referenz-Box

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

border-box

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

.masked {
  mask-image: url(./mask.svg);
  mask-size: 100% 100%;
  mask-clip: border-box;
}

 

Beachten Sie: Für ältere Browserversionen wird noch der vendor-prefix -webkit- benötigt.

Siehe auch

• Masken und Beschneidungen/Masken
  • mask-clip

Weblinks

• Spezifikation (W3C): mask-clip property
• MDN: mask-clip property
• Details: caniuse.com