CSS/Funktionen/inset()

Browserunterstützung
caniuse.com

Die CSS-Funktion inset() erzeugt ein Rechteck mit dem angegebenen Abstand zu den Rändern des enthaltenen Blocks. Es handelt sich um eine grundlegende Formfunktion des Datentyps <basic-shape>.

anwendbar auf

• clip-path
• shape-outside

Parameter

Syntax

inset( <'offset'> <'offset'> <'offset'> <'offset'> [round <'border-radius'>])

• vier Offset-Werte, beginnend mit dem Offset der oberen Kante und im Uhrzeigersinn,
  Jeder Versatzwert kann entweder eine Längenangabe, ein Prozentwert oder das Schlüsselwort auto sein.
• einem optionalen Schlüsselwort round mit dem Parameter border-radius, um dem Rechteck abgerundete Ecken hinzuzufügen.

Beispiel

.portrait {
  clip-path: inset(10% 20%);
}

Das Bild wird entsprechend der inset()-Funktion beschnitten.

Siehe auch

• Masken und Beschneidungen
  inset()-Funktion für Beschneidungen
• CSS/Tutorials/Ausrichtung/Shapes
  shape-outside
• Vergleiche auch die gleichnamige inset-Eigenschaft

Weblinks

• CSSWG.org: the inset() notation
• MDN: inset()

Browserunterstützung
caniuse.com