CSS
Formen für Schwimmer

Syntax

• Form außerhalb: keine | [<Grundform> || <Formfeld>] | <image>

• Formrand: <Länge> | <Prozentsatz>

• Form-Bild-Schwelle: <Anzahl>

Parameter

Bemerkungen

Außenform mit Grundform - Kreis ()

Mit der shape-outside CSS-Eigenschaft können Sie Formwerte für den Float-Bereich definieren, sodass der Inline-Inhalt anstelle der Box des Float-Objekts um die Form verläuft.

CSS

img:nth-of-type(1) {
  shape-outside: circle(80px at 50% 50%);
  float: left;
  width: 200px;
}
img:nth-of-type(2) {
  shape-outside: circle(80px at 50% 50%);
  float: right;
  width: 200px;  
}
p {
  text-align: center;
  line-height: 30px; /* purely for demo */
}

HTML

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>

Im obigen Beispiel handelt es sich bei beiden Bildern eigentlich um quadratische Bilder. Wenn der Text ohne die Eigenschaft shape-outside der shape-outside platziert wird, wird er auf beiden Seiten nicht um den Kreis herumfließen. Es fließt nur um die umschließende Box des Bildes. Mit shape-outside der Float-Bereich als Kreis definiert und der Inhalt wird um diesen imaginären Kreis , der mit shape-outside erstellt wird, shape-outside .

Der imaginäre Kreis , der zum Neudefinieren des Floatbereichs verwendet wird, ist ein Kreis mit einem Radius von 80px, der vom Mittelpunkt des Referenzfelds des Bilds gezeichnet wird.

Nachfolgend finden Sie einige Screenshots, die veranschaulichen, wie der Inhalt umgebogen wird, wenn shape-outside verwendet wird und wenn er nicht verwendet wird.

Ausgabe mit shape-outside

Ausgabe ohne shape-outside

Formrand

Die shape-margin CSS - Eigenschaft fügt eine Marge shape-outside .

CSS

img:nth-of-type(1) {
  shape-outside: circle(80px at 50% 50%);
  shape-margin: 10px;
  float: left;
  width: 200px;
}
img:nth-of-type(2) {
  shape-outside: circle(80px at 50% 50%);
  shape-margin: 10px;
  float: right;
  width: 200px;  
}
p {
  text-align: center;
  line-height: 30px; /* purely for demo */
}

HTML

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>

In diesem Beispiel wird ein 10px Rand um die Form unter Verwendung hinzugefügt shape-margin . Dies schafft etwas mehr Platz zwischen dem imaginären Kreis , der den Floatbereich definiert, und dem tatsächlichen Inhalt, der herumfließt.

Ausgabe: