superellipse() CSS function

Syntax

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.

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 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 unter Verwendung 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 Koordinaten x und y Punkte auf der Umkreislinie der Ellipse sind.

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

In dieser Gleichung sind x und y Koordinaten von Punkten auf der Umkreislinie des Kreises, und r ist der Radius des Kreises, wobei das Zentrum des Kreises bei (0, 0) liegt. Die Ellipse wird durch das Skalieren einer Kreisform entlang der x- und/oder y-Achse erzeugt.

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

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

• Ein K-Wert von 0 erzeugt eine gerade Linie. Dieser Wert kann zur Erstellung von abgeschrägten Ecken verwendet werden und entspricht dem <corner-shape-value> Schlüsselwort bevel.
• Ein K-Wert von 1 erzeugt eine gewöhnliche Ellipse, die 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 (das dem square Schlüsselwort entspricht), obwohl K-Werte von 10 oder mehr praktisch nicht von einem Quadrat zu unterscheiden sind.
• Negative K-Werte führen zu einer konkaven Kurve, was zu Eckformen führt, die nach innen gekrümmt oder "ausgehöhlt" 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.

Formale Syntax

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

Beispiele

superellipse() Wertvergleich

In diesem Beispiel erlauben zwei <input type="range"> Schieberegler Ihnen, durch viele verschiedene corner-shape superellipse() Werte und border-radius Werte zu navigieren, sodass Sie die Effekte jedes einzelnen auf einen Container vergleichen können. Der Code ist der Kürze halber versteckt, 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();

Spezifikationen

Browser-Kompatibilität

Siehe auch

• corner-shape
• <corner-shape-value>
• CSS-Ränder und Box-Dekorationen Modul