<corner-shape-value>

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.

Der <corner-shape-value> CSS Datentyp beschreibt die Form einer Container-Ecke. Er wird von der corner-shape-Kurzschrift-Eigenschaft und deren Bestandteil-Eigenschaften verwendet, um die Form festzulegen, die auf die betroffenen Container-Ecken angewendet werden soll.

Syntax

Der <corner-shape-value> Datentyp kann eine superellipse()-Funktion annehmen, die eine benutzerdefinierte Form definiert, oder einen von sechs Schlüsselwortwerten, die häufige superellipse()-Werte beschreiben.

Werte

superellipse()

Definiert eine benutzerdefinierte Superellipse-Eckform. Ein negativer Parameter erzeugt eine nach innen gerichtete, oder konkave, Kurve, während ein positiver Parameter eine nach außen gerichtete, oder konvexe, Kurve erzeugt.

Schlüsselwörter

Die verfügbaren Schlüsselwortwerte sind wie folgt:

bevel: Definiert eine gerade, diagonale Ecke, die weder konvex noch konkav ist. Das bevel-Schlüsselwort entspricht superellipse(0).
notch: Definiert eine 90-Grad konkave, quadratische Ecke. Das notch-Schlüsselwort entspricht superellipse(-infinity).
round: Definiert eine konvexe, gewöhnliche Ellipse, die die standardmäßige abgerundete Ecke darstellt, die durch border-radius ohne angewendete corner-shape erzeugt wird. Das round-Schlüsselwort entspricht superellipse(1). Dies ist der Standardwert (Initialwert) für alle corner-shape-Eigenschaften.
scoop: Definiert eine konkave, gewöhnliche Ellipse. Das scoop-Schlüsselwort entspricht superellipse(-1).
square: Definiert eine 90-Grad konvexe, quadratische Ecke, die die Standard-Eckform ist, wenn kein border-radius (oder border-radius: 0) angewendet wird. Das square-Schlüsselwort entspricht superellipse(infinity).
squircle: Definiert ein "Squircle", das eine konvexe Kurve zwischen round und square ist. Das squircle-Schlüsselwort entspricht superellipse(2).

Hinweis: Sie können sanft zwischen verschiedenen superellipse()-Werten und zwischen verschiedenen Eckform-Schlüsselwörtern animieren, da die Animation zwischen deren superellipse()-Äquivalenten interpoliert.

Formale Syntax

<corner-shape-value> = 
  round             |
  scoop             |
  bevel             |
  notch             |
  square            |
  squircle          |
  <superellipse()>  

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

Beispiele

Vergleich von `<corner-shape-value>`-Werten

In diesem Beispiel bieten wir ein Dropdown-Menü, mit dem Sie verschiedene <corner-shape-value>-Werte auswählen können, sowie einen Schieberegler, der den border-radius des Containers aktualisiert. Dies ermöglicht die Visualisierung der Auswirkung der verschiedenen Schlüsselwörter und superellipse()-Parameterwerte.

Die corner-shape-Eigenschaft definiert die Form der Ecken des Kastens, während der Bereich, auf den die Form angewendet wird, durch die border-radius-Eigenschaft festgelegt wird. Der Code ist der Kürze halber ausgeblendet, jedoch können Sie eine vollständige Erklärung der corner-shape-Werte sowie andere verwandte Beispiele auf der corner-shape-Referenzseite finden.

<form>
  <div>
    <label for="corner-shape-choice">Choose a corner-shape value:</label>
    <select id="corner-shape-choice">
      <optgroup label="Keywords">
        <option value="square">square | superellipse(infinity)</option>
        <option selected value="squircle">squircle | superellipse(2)</option>
        <option value="round">round | superellipse(1)</option>
        <option value="bevel">bevel | superellipse(0)</option>
        <option value="scoop">scoop | superellipse(-1)</option>
        <option value="notch">notch | superellipse(-infinity)</option>
      </optgroup>
      <optgroup label="Functions">
        <option>superellipse(3)</option>
        <option>superellipse(1.5)</option>
        <option>superellipse(0.5)</option>
        <option>superellipse(-0.5)</option>
        <option>superellipse(-1.5)</option>
        <option>superellipse(-3)</option>
      </optgroup>
    </select>
  </div>
  <div>
    <label for="radius-slider">Choose a border-radius value:</label>
    <input
      type="range"
      id="radius-slider"
      min="0"
      value="45"
      max="90"
      step="1" />
  </div>
</form>
<section></section>

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

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

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

select {
  padding: 3px 5px;
}

form div:nth-of-type(2) {
  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 select = document.querySelector("select");
const range = document.getElementById("radius-slider");

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

select.addEventListener("change", setCorners);
range.addEventListener("input", setCorners);
setCorners();

Hinweis: Siehe auch das Beispiel zum Vergleich von superellipse()-Funktionswerten.

Spezifikationen

Specification
CSS Borders and Box Decorations Module Level 4 # typedef-corner-shape-value

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