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.

* Some parts of this feature may have varying levels of support.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
shape-outside
circle()
<gradient>
<image>
inset()
none
path()
polygon()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch