Dieinset()CSS Funktion definiert ein Rechteck mit den angegebenen Einabstandsdistanzen von jeder Seite der Referenzbox. Es ist eine grundlegende Formfunktion, die verwendet wird, um einen der<basic-shape>Datentypen zu definieren.

Probieren Sie es aus

clip-path: inset(30px);

clip-path: inset(1rem 2rem 3rem 4rem);

clip-path: inset(20% 30% round 20px);

clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem);

<section>  <div></div></section>

#default-example {  background: #ffee99;}#example-element {  background: linear-gradient(to bottom right, #ff5522, #0055ff);  width: 100%;  height: 100%;}

Syntax

shape-outside: inset(20px 50px 10px 0 round 50px);

Werte

<length-percentage>{1,4}

Wenn alle vier Argumente angegeben sind, repräsentieren sie die Abstände von oben, rechts, unten und links von der Referenzbox nach innen, die die Positionen der Kanten des Einstandsrechtecks definieren. Diese Argumente folgen der Syntax der Margin-Kurzform, die es Ihnen ermöglicht, alle vier Einabstände mit einem, zwei oder vier Werten festzulegen.

Wenn ein Paar von Einabständen für eine Dimension mehr als 100 % dieser Dimension ergibt, werden beide Werte proportional reduziert, sodass ihre Summe 100 % beträgt. Zum Beispiel hat der Wertinset(90% 10% 60% 10%) einen oberen Einabstand von90% und einen unteren Einabstand von60%. Diese Werte werden proportional zuinset(60% 10% 40% 10%) reduziert. Solche Formen, die keinen Bereich einschließen und keinenshape-margin haben, beeinflussen das Umfließen nicht.

<border-radius>

Die optionalen<border-radius> Argument(e) definieren abgerundete Ecken für das Einstandsrechteck unter Verwendung der border-radius-Kurzform-Syntax.

Formale Syntax

<inset()> =
inset(<length-percentage>{1,4}[round<'border-radius'>]?)

<length-percentage> =
<length>|
<percentage>

<border-radius> =
<length-percentage [0,∞]>{1,4}[ /<length-percentage [0,∞]>{1,4}]?

Beispiele

Einfaches Beispiel für inset

Im untenstehenden Beispiel verwenden wir eineinset()-Form, um Inhalte über das gefloatete Element zu ziehen. Ändern Sie die Abstands-Werte, um zu sehen, wie sich die Form verändert.

<div>  <div></div>  <p>    One November night in the year 1782, so the story runs, two brothers sat    over their winter fire in the little French town of Annonay, watching the    grey smoke-wreaths from the hearth curl up the wide chimney. Their names    were Stephen and Joseph Montgolfier, they were papermakers by trade, and    were noted as possessing thoughtful minds and a deep interest in all    scientific knowledge and new discovery. Before that night—a memorable night,    as it was to prove—hundreds of millions of people had watched the rising    smoke-wreaths of their fires without drawing any special inspiration from    the fact.  </p></div>

.box {  width: 400px;  margin: 0 auto;}.shape {  float: left;  width: 150px;  height: 100px;  clip-path: inset(45px 50px 15px 0 round 50px);  shape-outside: inset(40px 40px 10px 0 round 50px);  background-color: coral;  border-radius: 20px;  margin: 0;  padding: 20px;}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Eigenschaften, die diesen Datentyp verwenden:clip-path,shape-outside
• CSS-Formen Modul
• Leitfaden zu grundlegenden Formen