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 in den angegebenen Abständen von jedem Rand der Referenzbox. Es handelt sich um eine grundlegende Formfunktion, die zum Definieren eines der <basic-shape>-Datentypen verwendet wird.

Probieren Sie es aus

Syntax

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

Werte

<length-percentage>{1,4}

Wenn alle vier Argumente angegeben sind, stellen sie die Abstände von oben, rechts, unten und links von der Referenzbox nach innen dar, die die Positionen der Kanten des inset-Rechtecks definieren. Diese Argumente folgen der Syntax der margin-Kurzschrift, wodurch Sie alle vier Inset-Werte mit einer, zwei oder vier Werten festlegen können.

Wenn ein Paar von Insets für eine Dimension zusammen 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%) ein oberes Inset von 90% und ein unteres Inset von 60%. Diese Werte werden proportional auf inset(60% 10% 40% 10%) reduziert. Solche Formen, die keine Fläche einschließen und keinen shape-margin haben, beeinflussen das Umbrechen nicht.

<border-radius>

Die optionalen <border-radius>-Argumente definieren abgerundete Ecken für das inset-Rechteck mithilfe der border-radius-Kurzschriftsyntax.

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

Basis-Beispiel für inset

Im folgenden Beispiel verwenden wir eine inset()-Form, um Inhalte über das gefloatete Element zu ziehen. Ändern Sie die Offset-Werte, um zu sehen, wie sich die Form verä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

BCD tables only load in the browser

Siehe auch