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

css

superellipse(infinity)
superellipse(4)
superellipse(1.7)
superellipse(0)
superellipse(-2.8)
superellipse(-3)
superellipse(-infinity)

Parameter

<number>: Eine Zahl im Bereich von -infinity bis infinity, einschließlich.

Die superellipse() Funktion gibt eine Superellipse-Form zurück, die verwendet wird, um corner-shape Werte zu spezifizieren. Eine Superellipse ist eine geschlossene, symmetrische Kurve 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:

\frac{x^{2}}{a^{2}} + \frac{y^{2}}{b^{2}} = 1

Die Variablen a und b beziehen sich auf die Radien der Ellipse, während die Koordinaten x und y 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, die beide r gleich sind, kann die Gleichung für einen Kreis wie folgt geschrieben werden:

x^{2} + y^{2} = r^{2}

In dieser Gleichung sind x und y die Koordinaten von Punkten 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 eine Kreisform entlang der x- und/oder y-Achse skaliert wird.

Eine Superellipse-Form wird erzeugt, indem der Exponent 2 in jedem Fall durch 2^K ersetzt wird, wobei K das Argument ist, das an die superellipse() Funktion übergeben wird, was die Krümmung der Ellipse modifiziert:

x^{2^{K}} + y^{2^{K}} = 1

Das folgende Diagramm veranschaulicht verschiedene superellipse() Werte für die obere rechte Ecke eines Containers: infinity, 1, 0, -1 und -infinity:

Liniendiagramm, das die anhand unterschiedlicher K-Werte erstellten Ellipsen beschreibt, wie nachfolgend beschrieben

Ein K-Wert von 0 erzeugt eine gerade Linie. Dieser Wert kann verwendet werden, um abgeschrägte Ecken zu erzeugen und entspricht dem <corner-shape-value> bevel Schlüsselwort.
Ein K-Wert von 1 erzeugt eine gewöhnliche Ellipse, was dem round Schlüsselwort entspricht.
Ein K-Wert von >1 macht die Ellipsenform quadratischer; 2 entspricht dem squircle Schlüsselwort.
Ein K-Wert von infinity erzeugt ein perfektes Quadrat (entsprechend dem square Schlüsselwort), obwohl K-Werte von 10 oder mehr praktisch von einem Quadrat nicht zu unterscheiden sind.
Negative K-Werte führen zu einer konkaven Kurve, was zu Eckenformen führt, die nach innen gekrümmt oder „ausgeschöpft“ sind. Ein K-Wert von -1 entspricht dem scoop Schlüsselwort und -infinity entspricht dem notch 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 von der superellipse() Funktion zurückgegebene Wert immer derselbe für diesen K-Wert sein. Wenn dieser Wert auf zwei Elemente angewendet wird, kann sich das Erscheinungsbild der Eckenform unterscheiden, wenn die Boxgröße oder die border-radius Werte unterschiedlich sind.

Formale Syntax

<superellipse()> = 
  superellipse( <number [-∞,∞]>  |
  infinity                       |
  -infinity )

Beispiele

`superellipse()` Wertevergleich

In diesem Beispiel ermöglichen zwei <input type="range"> Schieberegler, viele verschiedene corner-shape superellipse() Werte und border-radius Werte durchzublättern, sodass Sie die Auswirkungen jedes einzelnen auf einen Container vergleichen können. Der Code ist aus Gründen der Kürze versteckt, aber die vollständige Erklärung des Superellipse-Wertevergleichs wird auf der corner-shape Referenzseite bereitgestellt.

<form>
  <div>
    <label for="superellipse-slider">Choose a superellipse() value:</label>
    <input
      type="range"
      id="superellipse-slider"
      min="-5"
      value="0"
      max="5"
      step="0.1" />
  </div>
  <div>
    <label for="radius-slider">Choose a border-radius value:</label>
    <input type="range" id="radius-slider" min="0" value="45" max="90" />
  </div>
</form>
<section></section>

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

body {
  width: fit-content;
  margin: 20px auto;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 100%;
  margin-top: 20px;
}

form div {
  margin-top: 5px;
  display: flex;
}

section {
  width: 100%;
  height: 180px;
  background-color: orange;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

section {
  box-shadow: 1px 1px 3px gray;
}

const rectangle = document.querySelector("section");
const superEllipseRange = document.getElementById("superellipse-slider");
const borderRadiusRange = document.getElementById("radius-slider");

function setCorners() {
  const seValue = `superellipse(${superEllipseRange.value})`;
  rectangle.style.cornerShape = seValue;
  const brValue = `${borderRadiusRange.value}px`;
  rectangle.style.borderRadius = brValue;
  rectangle.innerHTML = `<div><code>corner-shape: ${seValue};</code><br><code>border-radius: ${brValue};</code></div>`;
}

superEllipseRange.addEventListener("input", setCorners);
borderRadiusRange.addEventListener("input", setCorners);
setCorners();

Hinweis: Siehe auch das <corner-shape-value> Wertevergleich Beispiel.