CSS shapes
Das CSS Shapes-Modul beschreibt geometrische Formen. Es definiert auch CSS-Eigenschaften, die die Formen verwenden können, um die Geometrie des Umflussbereichs eines Elements zu steuern; dieser Bereich kann dann auf Ausschlüsse angewendet werden oder den Inhaltsbereich eines Elements spezifizieren.
Die Spezifikation definiert mehrere Möglichkeiten zur Erstellung von Formen. Inhalte können um oder innerhalb einer Form herum angeordnet werden, anstatt der Standardrechteckform des Box-Elements zu folgen.
Formen definieren Geometrien, die als CSS-Werte verwendet werden können. Dieses Modul stellt Funktionen zum Erstellen von Ellipsen, Polygonen und beliebigen Geometrien bereit. Andere CSS-Module können Formen verwenden, die in dieser Spezifikation definiert sind, einschließlich CSS motion path und CSS masking.
CSS-Formen in Aktion
Das folgende Beispiel zeigt ein Bild, das nach links gefloatet wurde, und die shape-outside
-Eigenschaft mit einem Wert von circle(50%)
angewendet wurde. Dies erzeugt eine Kreisform, und der Inhalt, der den Float umfließt, umfließt nun diese Form. Dies verändert die Länge der Zeilenboxen des umfließenden Textes. Sie können auf "Play" klicken, um den Code im MDN Playground zu bearbeiten.
Referenz
Eigenschaften
Hinweis:
Das CSS Shapes-Modul führt die Eigenschaften shape-inside
und shape-padding
ein, die bisher noch nicht implementiert wurden.
Datentypen
Funktionen
Begriffe
Leitfäden
- Overview of shapes
-
Definieren von Grundformen mit den Eigenschaften
shape-margin
undclip-path
, und Debuggen von Grundformen mit Entwickler-Tools. - Shapes from box values
-
Verwenden von
border-radius
-Krümmungen und CSS-Box-Modellwerten, um Formen zu erstellen. - Basic shapes with
shape-outside
-
Erstellen von Rechtecken, Kreisen, Ellipsen und Polygonen mit CSS-Formen, der Referenzbox und der
shape-outside
-Eigenschaft. - Shapes from images
-
Erstellen von Formen aus halbtransparenten Bilddateien und CSS-Gradienten.
Verwandte Konzepte
CSS motion path Modul
CSS masking Modul
CSS-Hintergründe und Rahmen Modul
border-radius
Kurzform
CSS-Box-Modell Modul
<box-edge>
Datentyp
Spezifikationen
Specification |
---|
CSS Shapes Module Level 1 |
CSS Shapes Module Level 2 |
Siehe auch
- CSS Shapes resources
- CSS Shapes 101 via alistapart.com (2014)
- Creating non-rectangular layouts with CSS Shapes via sarasoueidan.com (2013)
- How to use CSS Shapes in your web design via tutsplus.com (2016)
- How to get started with CSS Shapes via webdesignerdepot.com (2015)
- Edit CSS shapes with the shape path editor via mozilla.org (2018) (Video)