inset()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die inset() CSS Funktion definiert ein Rechteck mit den angegebenen Abständen vom Referenzrahmen. 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: #fe9;
}

#example-element {
  background: linear-gradient(to bottom right, #f52, #05f);
  width: 100%;
  height: 100%;
}

Syntax

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

Werte

<length-percentage>{1,4}

Wenn alle vier Argumente angegeben sind, repräsentieren sie die oberen, rechten, unteren und linken Abstände vom Referenzrahmen nach innen, die die Positionen der Kanten des inset-Rechtecks definieren. Diese Argumente folgen der Syntax der margin-Kurzform, die es Ihnen ermöglicht, alle vier Abstände mit einem, zwei oder vier Werten festzulegen.

Wenn ein Paar von Abständen für eine Dimension mehr als 100 % dieser Dimension ausmacht, werden beide Werte proportional verringert, sodass ihre Summe 100 % ergibt. Zum Beispiel hat der Wert inset(90% 10% 60% 10%) einen oberen Abstand von 90% und einen unteren Abstand von 60%. Diese Werte werden proportional auf inset(60% 10% 40% 10%) reduziert. Solche Formen, die keinen Bereich einschließen und keine shape-margin haben, beeinflussen den Textumfluss nicht.

<border-radius>

Das optionale <border-radius> Argument(e) definiert abgerundete Ecken für das inset-Rechteck 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

Grundlegendes Beispiel für inset

Im untenstehenden Beispiel haben wir eine inset() Form verwendet, um Inhalte über das gefloatete Element zu ziehen. Ändern Sie die Offset-Werte, um zu sehen, wie sich die Form ändert.

html
<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>
css
.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

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-inset

Browser-Kompatibilität

Siehe auch