Form außen - CSS-Tricks

Anonim

Die shape-outsideEigenschaft steuert, wie der Inhalt um den Begrenzungsrahmen eines schwebenden Elements gewickelt wird. In der Regel ist dies so, dass Text über eine Form wie einen Kreis, eine Ellipse oder ein Polygon fließen kann:

.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )

Es ist wichtig zu beachten, dass diese Eigenschaft vorerst nur für schwebende Elemente funktioniert, obwohl sich dies wahrscheinlich in Zukunft ändern wird. Die shape-outsideEigenschaft kann auch mit Übergängen oder Animationen bearbeitet werden.

Werte

  • circle(): zur Herstellung kreisförmiger Formen.
  • ellipse(): zur Herstellung von elliptischen Formen.
  • inset(): zur Herstellung rechteckiger Formen.
  • polygon(): Zum Erstellen einer beliebigen Form mit 3 oder mehr Eckpunkten.
  • url(): Gibt an, welches Bild zum Umbrechen von Text verwendet werden soll.
  • initial: Der Schwimmerbereich ist nicht betroffen.
  • inherit: erbt den shape-outsideWert vom übergeordneten Element.

Die folgenden Werte geben an, welche Referenz des Boxmodells zum Positionieren der Form innerhalb verwendet werden soll:

  • margin-box
  • padding-box
  • border-box

Diese Werte sollten an das Ende angehängt werden, zum Beispiel : shape-outside: circle(50% at 0 0) padding-box. Standardmäßig wird die margin-boxReferenz verwendet.

Ellipse()

.element ( shape-outside: ellipse(150px 300px at 50% 50%); )

Die ellipse()Funktion erfordert die Radienwerte für die x-, y-Achse der Ellipse, gefolgt von den Koordinaten, um den Mittelpunkt der Form innerhalb ihres Begrenzungsrahmens zu positionieren. Im obigen Beispiel wird beispielsweise die Mitte der Ellipse in der vertikalen und horizontalen Mitte des .elementDiv positioniert :

Obwohl die obige Demo darauf hindeutet, dass wir die Form von sich divselbst ändern , werden wir beim Hinzufügen von Rahmen und einem Hintergrundbild feststellen, dass der Begrenzungsrahmen tatsächlich noch rechteckig ist:

Es könnte besser sein, es so zu sehen: Mit der shape-outsideEigenschaft ändern wir die Beziehung anderer Elemente um ein Element herum, nicht die Geometrie des Elements selbst. Um dies zu beheben, müssen wir shape-outsideneben der clip-path()Eigenschaft Folgendes verwenden, wie in diesem Beispiel:

Kreis()

.element ( shape-outside: circle(50%); )

Diese Funktion erstellt einen Kreis und im obigen Codebeispiel wird ein Kreis mit einem Radius erstellt, der halb so hoch und breit ist wie .element. Die circle()Funktion kann auch dieselbe Syntax zum Positionieren der Form verwenden.

url ()

.element ( shape-outside: url('circle.png.webp'); )

In diesem Fall haben wir zwei schwebende Bilder, eines auf jeder Seite eines Textblocks. Da für beide Bilder die shape-outsideEigenschaft festgelegt ist, werden diese beiden Gleitkommazahlen durch den darunter liegenden Text vermieden.

Es ist auch möglich, die shape-image-thresholdEigenschaft festzulegen, die den Browser darüber informiert, welche Pixel abhängig von ihrer Transparenz die Form erstellen sollen. Zum Beispiel:

.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )

In diesem Beispiel müssen die einzigen Pixel, die die Form erstellen, eine Transparenz von 50% und mehr aufweisen. Werte von 0.0(transparent) bis 1.0(undurchsichtig) sind gültig.

Polygon ()

.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )

Diese Funktion erstellt jede Form mit drei oder mehr Eckpunkten, z. B.:

Es ist wichtig zu beachten, dass diese Eigenschaft, wenn sie animiert werden soll, dieselbe Anzahl von Scheitelpunkten erfordert, wenn Sie den animierten Status deklarieren:

.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )

Einsatz()

.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )

inset()ist eine Funktion zum Erstellen rechteckiger Formen. Sie benötigt fünf Parameter, der fünfte border-radiusist optional. Die anderen Argumente sind Offsets nach innen vom Rand von .element:

Oben haben wir ein Element, das 200 Pixel breit und 200 Pixel hoch ist, und wir versetzen die Form in alle Richtungen mit Ausnahme der linken Seite auf 50 Pixel. Auf diese Weise wird der Text über die Form gewickelt, obwohl sich das div nach oben erstreckt.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
37 62 Nein 79 7.1 *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 8 *