inset()

Die inset() CSS Funktion definiert ein Rechteck in den angegebenen Abständen 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 class="default-example" id="default-example">
 <div class="transition-all" id="example-element"></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 Innenabstände von der Referenzbox für oben, rechts, unten und links, die die Positionen der Kanten des Rechtecks definieren. Diese Argumente folgen der Syntax der Margin-Kurzschreibweise, die es Ihnen ermöglicht, alle vier Innenabstände mit einem, zwei oder vier Werten zu setzen.

Wenn ein Paar von Innenabständen für eine Dimension mehr als 100% dieser Dimension ergibt, werden beide Werte proportional reduziert, sodass ihre Summe 100% entspricht. Zum Beispiel hat der Wert inset(90% 10% 60% 10%) einen oberen Innenabstand von 90% und einen unteren Innenabstand von 60%. Diese Werte werden proportional auf inset(60% 10% 40% 10%) verringert. Formen wie diese, die keinen Bereich umschließen und keinen shape-margin haben, beeinflussen das Umfließen nicht.

<border-radius>

Die optionalen <border-radius> Argument(e) definieren abgerundete Ecken für das Innenrechteck unter Verwendung der Border-Radius-Kurzschreibweise.

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 Beispiel unten wird eine inset() Form verwendet, um Inhalt über das gefloatete Element zu ziehen. Ändern Sie die Versatzwerte, um zu sehen, wie sich die Form ändert.

<div class="box">
 <div class="shape"></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