`superellipse()` CSS-Funktion

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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 -unendlich bis unendlich, inklusive.

Die superellipse() Funktion gibt eine Superellipse-Form zurück, die zur Spezifikation von corner-shape Werten verwendet wird. Eine Superellipse ist eine geschlossene kurvensymmetrische Form 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 am Ursprung zentrierte Ellipse:

\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 x und y Koordinaten Punkte auf dem Umfang der Ellipse sind.

Ein Kreis ist eine Ellipse, bei der die Radien, das a und b in der vorherigen Gleichung, die gleiche Länge haben. Mit a und b beide gleich r, kann die Gleichung für einen Kreis wie folgt geschrieben werden:

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

In dieser Gleichung sind die x und y Koordinaten Punkte auf dem Umfang des Kreises und das r ist der Radius des Kreises, mit dem Mittelpunkt des Kreises bei (0, 0). Die Ellipse entsteht durch Skalierung einer Kreisform entlang der x und/oder y Achse.

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

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

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

Liniendiagramm, das die mit verschiedenen K-Werten erstellten Ellipsen veranschaulicht, wie unten 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, entsprechend dem round Schlüsselwort.
Ein K Wert von >1 macht die Ellipsenform quadratischer; 2 entspricht dem squircle Schlüsselwort.
Ein K Wert von unendlich erzeugt ein perfektes Quadrat (entsprechend dem square Schlüsselwort), wobei K Werte von 10 oder mehr praktisch nicht von einem Quadrat zu unterscheiden sind.
Negative K Werte führen zu einer konkaven Krümmung, was zu Eckenformen führt, die nach innen gekrümmt sind oder "ausgehöhlt" wirken. Ein K Wert von -1 entspricht dem scoop Schlüsselwort und -unendlich 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 Rückgabewert der superellipse() Funktion immer derselbe für diesen K Wert sein. Wenn dieser Wert auf zwei Elemente angewendet wird, kann das Aussehen der Eckenform unterschiedlich sein, wenn sich die Boxgröße oder border-radius Werte unterscheiden.

Formale Syntax

<superellipse()> = 
  superellipse( <number>  |
  infinity                |
  -infinity )

Beispiele

`superellipse()` Wertvergleich

In diesem Beispiel ermöglichen zwei <input type="range"> Schieberegler das Durchgehen vieler verschiedener corner-shape superellipse() Werte und border-radius Werte, die es Ihnen ermöglichen, die Effekte von jedem auf einen Container zu vergleichen. Der Code ist zur Kürze verborgen, aber die vollständige Erklärung des Superellipse Wertvergleichs 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 Beispiel für den <corner-shape-value> Wertvergleich.

Spezifikationen

Spezifikation
CSS Borders and Box Decorations Module Level 4 # funcdef-superellipse

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

superellipse() CSS-Funktion

Help improve MDN

`superellipse()` CSS-Funktion