Was ist ? Was ist der Nutzen?

Was ist ? Was ist der Nutzen? In diesem Artikel erfahren Sie, was in CSS ist und welche Funktionen es hat, damit jeder die Verwendung von verstehen kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Grundlegende Einführung von

Was?

ist ein CSS-Datentyp, der grundlegende Grafiken darstellt und auf die Eigenschaften „clip-path“ und „shape-outside“ einwirkt. [Empfehlung für ein entsprechendes Video-Tutorial: CSS3-Tutorial]

Definieren Sie die Grundform, siehe unten. Der Abschnitt „Grundlegende Formfunktionen“ listet mögliche Formfunktionswerte und deren kurze Beschreibungen auf.

Die Grundform wird dann als Wert an Eigenschaften übergeben (z. B. die Eigenschaft „shape-outside“ oder die Eigenschaft „clip-path“), mit denen die Form auf ein Element angewendet wird, um den Inhaltsfluss um ihn herum zu ändern oder um das Element auszuschneiden, um Formen separat zu definieren.

2. Formreferenzbox

Zusätzlich zur Höhe und Breite des Elements ist die Boxmodellbox des Elements: Randbox (Rand). -box), Content-Box (Content-Box), Padding-Box (Padding-Box) und Border (Border-Box) können auch als Referenz verwendet werden, um den Formbereich eines Elements anzugeben. Der Referenzrahmen kann einer der vier Rahmen sein.

Wenn zum Definieren einer Form verwendet wird, wird das Referenzfeld durch jede Eigenschaft mithilfe des Werts definiert (siehe Abschnitt Beispiele unten). Der Ursprung des Koordinatensystems der Grundform liegt in der oberen linken Ecke des Bezugssystems, die x-Achse bewegt sich nach rechts und die y-Achse verläuft nach unten. Alle als Prozentsätze ausgedrückten Längen werden aus den verwendeten Abmessungen der Referenzbox aufgelöst (durch Prozentsätze definierte Längen werden durch das zugehörige Boxmodell mit den verwendeten Abmessungen neu definiert). Wenn kein Referenzrahmen angegeben ist, wird der Rahmen als Referenzrahmen für die Eigenschaft „clip-path“ verwendet, und der Rahmen wird für die Form verwendet, die in der Eigenschaft „shape-outside“ verwendet wird.

2. Grundlegende Formfunktionen

Die folgenden Grafiken werden derzeit von unterstützt. Alle -Werte werden durch Funktionsausdrücke definiert und folgen der Wertedefinitionssyntax.

1. inset()

Syntax:

inset( <shape-arg>{1,4} [round <border-radius>] )

Beschreibung: Die Funktion

inset() definiert ein Einfügungsrechteck.

Es sind 1 bis 4 Offset-Werte erforderlich, die auf den Offset der inneren Referenzboxkanten (obere, rechte, untere und linke Ränder und Eckpunkte) verweisen. Diese geben die Position des Einfügerechtecks ​​innerhalb des Elements an.

Der optionale Parameter wird verwendet, um den in die Eckpunkte des Rechtecks ​​eingefügten Bogenwinkel zu definieren.

2. circle()

circle( [<shape-radius>]? [at <position>]? )

circle() definiert einen Einfügungskreis

, der der Radius des Kreises ist, akzeptiert keine negativen Zahlen als Wert dieses Parameters.

Der Parameter definiert die Position des Kreismittelpunkts. Der Standardwert ist die Mitte des Boxmodells.

3. ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

Die Funktion ellipse() definiert eine Ellipse;

Die Werte sind rx bzw. ry, wobei rx den Radius in Richtung der x-Achse und ry den Radius in Richtung der y-Achse darstellt. Dieser Parameter akzeptiert keine negativen Werte.

Der Parameter definiert die Position des Mittelpunkts der Ellipse. Sein Standardwert ist die Mitte des Boxmodells.

4. polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

polygon()-Funktion definiert ein Polygon

stellt die Füllregel dar ), das heißt, wie das Polygon gefüllt wird. Optionale Werte sind ungleich Null und gerade ungerade. Der Standardwert für diesen Parameter ist ungleich Null.

3. Beschreibung der Grundformen

Berechnete Werte der Grundformen

Werte in Grundformfunktionen werden wie angegeben berechnet, mit Ausnahmen wie:

1 Ausgelassene Werte werden einbezogen und ihre Standardwerte werden berechnet.

2. Ein

3. Ein berechnet die erweiterte Liste aller acht Referenzfelder für

-Formen werden als Teil von Eigenschaften definiert, die diese Formen als Werte haben.

Interpolation von Grundformen (Animation zwischen Formen)

Für die Interpolation zwischen einer Grundform und einer zweiten Grundform gelten die folgenden Regeln. Werte in der Formfunktion werden als einfache Listen eingefügt. Listenwerte werden nach Möglichkeit als Länge, Prozentsatz oder Berechnung eingefügt. Gehören die Listenwerte nicht zu diesen Typen, sind aber gleich (z. B. ungleich Null findet in beiden Listen die gleiche Listenposition), dann werden die Werte interpoliert.

1. Beide Formen müssen denselben Referenzrahmen verwenden.

2. Wenn beide Formen vom gleichen Typ sind, dieser Typ ist ellipse() oder Circle(), und keiner der Radien das Schlüsselwort „nächste Seite“ oder „am weitesten entfernte Seite“ verwendet, dann interpolieren Sie in der Formfunktion zwischen beiden Wert.

3. Wenn beide Formen vom Typ inset() sind, wird zwischen jedem Wert in der Formfunktion eine Interpolation durchgeführt.

4. Wenn beide Formen vom Typ Polygon() sind, haben die beiden Polygone die gleiche Anzahl von Eckpunkten und werden zwischen den einzelnen Werten in der Formfunktion unter Verwendung derselben interpoliert.

5. In allen anderen Fällen ist keine Interpolation angegeben.

4. Browserkompatibilität

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels Ich hoffe, es wird für das Studium aller hilfreich sein.

Das obige ist der detaillierte Inhalt vonWas ist ? Was ist der Nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!