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

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, einschließlich.

Die Funktion superellipse() gibt eine Superellipse-Form zurück, die verwendet wird, um corner-shape Werte anzugeben. 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 im 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 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 gleich r kann die Gleichung für einen Kreis wie folgt geschrieben werden:

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

In dieser Gleichung sind x und y 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 entsteht durch das Skalieren einer Kreisform entlang der x- und/oder y-Achse.

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

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 Ellipsen zeigt, die mit verschiedenen K-Werten erstellt wurden, wie nachfolgend beschrieben

Ein K Wert von 0 erzeugt 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 von 1 erzeugt eine gewöhnliche Ellipse, entsprechend dem Schlüsselwort round.
Ein K Wert von >1 lässt die Ellipsenform quadratischer erscheinen; 2 entspricht dem Schlüsselwort squircle.
Ein K Wert von unendlich erzeugt ein perfektes Quadrat (entspricht dem square Schlüsselwort), obwohl K Werte von 10 oder mehr praktisch nicht von einem Quadrat zu unterscheiden sind.
Negative K Werte führen zu einer konkaven Kurve, wodurch Eckformen entstehen, die nach innen gekrümmt oder „ausgehöhlt“ sind. Ein K Wert von -1 entspricht dem Schlüsselwort scoop und -unendlich entspricht dem Schlüsselwort notch.

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 abweichen, wenn die Boxgrößen oder border-radius Werte unterschiedlich sind.

Formale Syntax

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

Beispiele

`superellipse()` Wertvergleich

In diesem Beispiel ermöglichen zwei <input type="range"> Regler Ihnen, durch viele verschiedene corner-shape superellipse() und border-radius Werte zu blättern und die Auswirkungen auf einen Container zu vergleichen. Der Code ist aus Gründen der Kürze ausgeblendet, aber die vollständige Erklärung des Superellipse-Wertvergleichs finden Sie auf der corner-shape Referenzseite.

<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: Sehen Sie sich auch das Beispiel zum <corner-shape-value> Wertvergleich an.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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