superellipse()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die superellipse() CSS-Funktion definiert die Krümmung einer Ellipse und wird verwendet, um Eckformen entweder direkt oder über <corner-shape-value> Schlüsselwörter anzugeben.
Syntax
superellipse(infinity)
superellipse(4)
superellipse(1.7)
superellipse(0)
superellipse(-2.8)
superellipse(-3)
superellipse(-infinity)
Parameter
<number>-
Eine Zahl im Bereich von
-unendlichbisunendlich, einschließlich.
Rückgabewert
Eine Superellipse-Form.
Beschreibung
Die superellipse()-Funktion gibt eine Superellipse-Form zurück, die verwendet wird, um corner-shape Werte zu spezifizieren. Eine Superellipse ist eine geschlossene, symmetrische Form zwischen einem Rechteck und einer Ellipse. Sie ähnelt einer Ellipse, die die geometrischen Merkmale ihrer beiden Achsen beibehält.
Die Superellipse-Form wird mithilfe einer modifizierten Version einer Ellipse berechnet. Die folgende Gleichung definiert eine Ellipse, die im Ursprung zentriert ist:
Die Variablen a und b beziehen sich auf die Radien der Ellipse, während die x- und y-Koordinaten Punkte auf dem Umfang der Ellipse sind.
Ein Kreis ist eine Ellipse, bei der die Radien, d.h. a und b in der vorigen Gleichung, gleich lang sind. Mit a und b beide gleich r, kann die Gleichung für einen Kreis folgendermaßen geschrieben werden:
In dieser Gleichung sind die x- und y-Koordinaten Punkte auf dem Umfang des Kreises, und r ist der Radius des Kreises, wobei der Mittelpunkt des Kreises (0, 0) ist. Die Ellipse wird erzeugt, indem man eine Kreisform entlang der x- und/oder y-Achse skaliert.
Eine Superellipse-Form wird erstellt, indem der 2-Exponent in jedem Fall durch 2K ersetzt wird, wobei K das Argument ist, das an die superellipse()-Funktion übergeben wird, was die Krümmung der Ellipse verändert:
Das folgende Diagramm illustriert verschiedene superellipse()-Werte für die obere rechte Ecke eines Containers: unendlich, 1, 0, -1 und -unendlich:
- Ein
K-Wert von0erzeugt eine gerade Linie. Dieser Wert kann verwendet werden, um abgeschrägte Ecken zu erzeugen und entspricht dem<corner-shape-value>bevelSchlüsselwort. - Ein
K-Wert von1erzeugt eine gewöhnliche Ellipse, was demroundSchlüsselwort entspricht. - Ein
K-Wert von>1macht die Ellipsenform quadratischer;2entspricht demsquircleSchlüsselwort. - Ein
K-Wert vonunendlicherzeugt ein perfektes Quadrat (entspricht demsquareSchlüsselwort), obwohlK-Werte von10oder mehr praktisch nicht von einem Quadrat zu unterscheiden sind. - Negative
K-Werte führen zu einer konkaven Krümmung, was zu Eckformen führt, die nach innen gekrümmt oder "ausgehöhlt" sind. EinK-Wert von-1entspricht demscoopSchlüsselwort und-unendlichentspricht demnotchSchlüsselwort.
Eine negative oder positive Superellipse würde symmetrisch zu einer Superellipse mit ihrem inversen Wert erscheinen.
Hinweis:
Für jeden übergebenen K-Parameterwert wird der Rückgabewert der superellipse()-Funktion immer derselbe für diesen K-Wert sein. Wenn dieser Wert auf zwei Elemente angewendet wird, kann das Erscheinungsbild der Eckform unterschiedlich sein, wenn die Boxgröße oder die border-radius-Werte unterschiedlich sind.
Formale Syntax
<superellipse()> =
superellipse( <number [-∞,∞]> |
infinity |
-infinity )
Beispiele
>Vergleich von superellipse()-Werten
In diesem Beispiel ermöglichen zwei <input type="range">-Schieberegler das Durchlaufen vieler verschiedener corner-shape superellipse()-Werte und border-radius-Werte, sodass Sie die Effekte jedes einzelnen auf einem Container vergleichen können. Der Code ist der Kürze halber versteckt, aber die vollständige Erklärung des Vergleichs von Superellipse-Werten wird auf der corner-shape Referenzseite bereitgestellt.
Hinweis:
Siehe auch das Beispiel für den <corner-shape-value> Wertvergleich.
Spezifikationen
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4> # funcdef-superellipse> |
Browser-Kompatibilität
Loading…