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

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

Beschneidungen mit clip-path

sichtbare Bereiche von Elementen flexibel steuern
Textumfluss mit Shapes

Shapes ermöglichen interessante Layouts mit fließendem Text um grafische Objekte herum.