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 möglicherweise nicht rechteckig ist – um die der angrenzende inline Inhalt umfließen soll. Standardmäßig fließt der Inline-Inhalt um das Margin-Box; shape-outside bietet eine Möglichkeit, dieses Umfließen anzupassen. Dadurch wird es möglich, Text um komplexe Objekte anstelle von rechteckigen Kästen fließen zu lassen.

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 mit den Werten aus der untenstehenden Liste angegeben, die den Float-Bereich für Float-Elemente definieren. Der Float-Bereich bestimmt die Form, um die Inline-Inhalte (Float-Elemente) fließen.

Werte

none

Der Float-Bereich ist nicht beeinflusst. Der Inline-Inhalt umfließt wie üblich die Margin-Box des Elements.

<shape-box>

Der Float-Bereich wird gemäß der Form der Kanten eines Float-Elements berechnet (wie durch das CSS-Box-Modell definiert). Dies kann margin-box, border-box, padding-box oder content-box sein. Die Form schließt jede Krümmung ein, die durch die border-radius Eigenschaft erzeugt wird (ein Verhalten, das ähnlich zu background-clip ist).

margin-box

Definiert die Form, die durch die äußere Margin-Kante eingeschlossen 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 Margin-Box border-radius + margin. Wenn das Verhältnis kleiner als 1 ist, dann ist der Eckenradius der Margin-Box border-radius + (margin * (1 + (ratio - 1) ^ 3)).

border-box

Definiert die Form, die durch die äußere Border-Kante eingeschlossen wird. Die Form folgt den normalen Regeln zur Formgebung des Außenrands des Border für Eckenradien.

padding-box

Definiert die Form, die durch die äußere Padding-Kante eingeschlossen wird. Die Form folgt den normalen Regeln zur Formgebung des Innenrands des Border für Eckenradien.

content-box

Definiert die Form, die durch die äußere Content-Kante eingeschlossen wird. Jeder Eckenradius dieser Box ist das größere von 0 oder border-radius - border-width - padding.

<basic-shape>

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

<image>

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

Hinweis: Wenn das Bild ungültig ist, ist der Effekt so, als ob das Schlüsselwort none angegeben wurde. 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

Text im Trichterverfahren

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