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
/* 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
odercontent-box
sein. Die Form schließt jede Krümmung ein, die durch dieborder-radius
Eigenschaft erzeugt wird (ein Verhalten, das ähnlich zubackground-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
- undmargin
-Werte bestimmt. Wenn das Verhältnisborder-radius / margin
1
oder mehr beträgt, ist der Eckenradius der Margin-Boxborder-radius + margin
. Wenn das Verhältnis kleiner als1
ist, dann ist der Eckenradius der Margin-Boxborder-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
oderborder-radius - border-width - padding
.
<basic-shape>
-
Der Float-Bereich wird basierend auf der durch eine
inset()
,circle()
,ellipse()
oderpolygon()
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äßigmargin-box
. <image>
-
Der Float-Bereich wird basierend auf dem Alphakanal des angegebenen
<image>
berechnet, wie durchshape-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
Initialer Wert | none |
---|---|
Anwendbar auf | Flusselemente |
Vererbt | Nein |
Berechneter Wert | wie definiert für basic-shape (gefolgt von shape-box , falls angegeben), dem image , dessen URI absolut gemacht wurde, ansonsten wie angegeben. |
Animationstyp | ja, 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
<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
.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