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 Eckenformen entweder direkt oder über <corner-shape-value>
Schlüsselwörter zu spezifizieren.
Syntax
superellipse(infinity)
superellipse(4)
superellipse(1.7)
superellipse(0)
superellipse(-2.8)
superellipse(-3)
superellipse(-infinity)
Parameter
<number>
-
Eine Zahl im Bereich von
-unendlich
bisunendlich
, 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 Kurvenform zwischen einem Rechteck und einer Ellipse. Sie ähnelt einer Ellipse, die die geometrischen Merkmale ihrer beiden Achsen beibehält.
Die Superellipse-Form wird mit einer modifizierten Version einer Ellipse berechnet. Die folgende Gleichung definiert eine Ellipse, die am 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, die a
und b
in der vorherigen Gleichung, die gleiche Länge haben. Mit a
und b
gleich r
kann die Gleichung für einen Kreis als folgt 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 das Zentrum des Kreises (0, 0)
ist. Die Ellipse wird durch Skalierung einer Kreisform entlang der x
- und/oder y
-Achse erzeugt.
Eine Superellipse-Form wird erstellt, indem der Exponent 2
in jedem Fall durch 2K ersetzt wird, wobei K
das Argument ist, das an die superellipse()
Funktion übergeben wird, die die Krümmung der Ellipse modifiziert:
Das folgende Diagramm veranschaulicht verschiedene superellipse()
Werte für die obere rechte Ecke eines Containers: unendlich
, 1
, 0
, -1
und -unendlich
:
- Ein
K
Wert von0
erstellt eine gerade Linie. Dieser Wert kann verwendet werden, um abgeschrägte Ecken zu erstellen und entspricht dem<corner-shape-value>
bevel
Schlüsselwort. - Ein
K
Wert von1
erstellt eine gewöhnliche Ellipse, entsprechend demround
Schlüsselwort. - Ein
K
Wert von>1
macht die Ellipsenform quadratischer;2
entspricht demsquircle
Schlüsselwort. - Ein
K
Wert vonunendlich
erzeugt ein perfektes Quadrat (entsprechend demsquare
Schlüsselwort), obwohlK
Werte von10
oder mehr praktisch nicht von einem Quadrat zu unterscheiden sind. - Negative
K
Werte resultieren in einer konkaven Kurve, was zu Eckenformen führt, die nach innen gebogen sind oder "ausgehöhlt" wirken. EinK
Wert von-1
entspricht demscoop
Schlüsselwort und-unendlich
demnotch
Schlü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 Eckenform unterschiedlich sein, wenn sich die Boxgröße oder die border-radius
Werte unterscheiden.
Formale Syntax
<superellipse()> =
superellipse( <number [-∞,∞]> |
infinity |
-infinity )
Beispiele
>superellipse()
Wertvergleich
In diesem Beispiel ermöglichen zwei <input type="range">
Schieberegler, durch viele verschiedene corner-shape
superellipse()
Werte sowie border-radius
Werte zu gehen, sodass Sie die Effekte jedes auf einen Container vergleichen können. Der Code ist der Kürze wegen verborgen, aber die vollständige Erklärung des Superellipse-Wertvergleichs ist auf der corner-shape
Referenzseite verfügbar.
Hinweis:
Siehe auch das Beispiel zum <corner-shape-value>
Wertvergleich.
Spezifikationen
Specification |
---|
CSS Borders and Box Decorations Module Level 4> # funcdef-superellipse> |
Browser-Kompatibilität
Loading…