shape-outside

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 shape-outside CSS Eigenschaft definiert eine Form, die nicht rechteckig sein kann, um die sich der benachbarte Inline-Inhalt wickeln soll. Standardmäßig wickelt sich Inline-Inhalt um seine Randbox; shape-outside bietet eine Möglichkeit, dieses Umwickeln anzupassen und so den Text um komplexe Objekte statt um einfache Boxen zu wickeln.

Probieren Sie es aus

Syntax

css
/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* Shape box with basic shape */
shape-outside: circle() border-box;
shape-outside: margin-box ellipse();

/* <url> value */
shape-outside: url(image.png);

/* <gradient> value */
shape-outside: linear-gradient(45deg, #fff 150px, red 150px);

/* Global values */
shape-outside: inherit;
shape-outside: initial;
shape-outside: revert;
shape-outside: revert-layer;
shape-outside: unset;

Die shape-outside Eigenschaft wird unter Verwendung der unten aufgeführten Werte angegeben, die den Float-Bereich für Float-Elemente definieren. Der Float-Bereich bestimmt die Form, um die sich Inline-Inhalte (Float-Elemente) wickeln.

Werte

none

Der Float-Bereich wird nicht beeinflusst. Inline-Inhalt wickelt sich wie üblich um die Randbox des Elements.

<shape-box>

Der Float-Bereich wird entsprechend der Form der Kanten eines Float-Elements berechnet (wie durch das CSS Box Model definiert). Dies kann margin-box, border-box, padding-box oder content-box sein. Die Form umfasst jede Krümmung, die durch die border-radius Eigenschaft erzeugt wird (ähnliches Verhalten wie background-clip).

margin-box

Definiert die Form, die durch den äußeren Rand begrenzt wird. Die Eckenradien dieser Form werden durch die entsprechenden border-radius und margin Werte bestimmt. Wenn das Verhältnis border-radius / margin 1 oder mehr beträgt, ist der Eckenradius der Randbox border-radius + margin. Wenn das Verhältnis kleiner als 1 ist, ist der Eckenradius der Randbox border-radius + (margin * (1 + (ratio - 1) ^ 3)).

border-box

Definiert die Form, die durch den äußeren Rand der Kontur begrenzt wird. Die Form folgt den üblichen Regeln der Konturradiusgestaltung für die Außenseite der Kontur.

padding-box

Definiert die Form, die durch den äußeren Rand des Innenabstands begrenzt wird. Die Form folgt den üblichen Regeln der Konturradiusgestaltung für die Innenseite der Kontur.

content-box

Definiert die Form, die durch den äußeren Rand des Inhalts begrenzt wird. Jeder Eckenradius dieser Box ist der größere von 0 oder border-radius - border-width - padding.

<basic-shape>

Der Float-Bereich wird basierend auf der Form berechnet, die durch eine inset(), circle(), ellipse(), oder polygon() Funktion erstellt wird; andere <basic-shape> Funktionen sind ungültig. Wenn ein <shape-box> ebenfalls angegeben ist, definiert er die Referenzbox für die <basic-shape> Funktion. Andernfalls ist die Referenzbox standardmäßig margin-box.

<image>

Der Float-Bereich wird basierend auf dem Alphakanal des angegebenen <image> extrahiert und berechnet, wie durch shape-image-threshold definiert.

Hinweis: Wenn das Bild ungültig ist, hat dies den Effekt, als wäre das Schlüsselwort none angegeben worden. Zusätzlich muss das Bild mit CORS Headern bereitgestellt werden, die seine Verwendung erlauben.

Formale Definition

Anfangswertnone
Anwendbar aufFlusselemente
VererbtNein
Berechneter Wertwie definiert für <basic-shape> (gefolgt von shape-box, falls angegeben), dem <image>, dessen URI absolut gemacht wurde, ansonsten wie angegeben.
Animationstypja, wie angegeben für <basic-shape>, ansonsten nein

Formale Syntax

shape-outside = 
  none                              |
  [ <basic-shape> || <shape-box> ]  |
  <image>                           

<shape-box> = 
  <visual-box>  |
  margin-box    

<image> = 
  <url>       |
  <gradient>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Trichtertext

HTML

html
<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be funneling your attention
    towards a spot on the page to drive you to follow a particular link.
    Sometimes you don't notice.
  </p>
</div>

CSS

css
.main {
  width: 530px;
}

.left,
.right {
  background-color: lightgray;
  height: 12ex;
  width: 40%;
}

.left {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

Ergebnis

Spezifikationen

Specification
CSS Shapes Module Level 1
# shape-outside-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch