`<corner-shape-value>` CSS-Typ

Eingeschränkt verfügbar

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

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 durch die Kurzschreibweiseigenschaft corner-shape und ihre Bestandteileigenschaften 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 der sechs Schlüsselwortwerte, die gebräuchliche superellipse()-Werte beschreiben.

Werte

superellipse()

Definiert eine benutzerdefinierte Superellipse-Form der Ecke. Ein negativer Parameter erzeugt eine nach innen gerichtete, konkave Kurve, während ein positiver Parameter eine nach außen gerichtete, 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(-unendlich).
round: Definiert eine konvexe gewöhnliche Ellipse, die die standardmäßige abgerundete Ecke ist, die durch border-radius ohne angewendete corner-shape erzeugt wird. Das round-Schlüsselwort entspricht superellipse(1) und ist der Standard- (Anfangs-)wert 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 Standardform der Ecke ist, wenn kein border-radius (oder border-radius: 0) angewendet wird. Das square-Schlüsselwort entspricht superellipse(unendlich).
squircle: Definiert ein „Squircle“, das eine konvexe Kurve zwischen round und square ist. Das squircle-Schlüsselwort entspricht superellipse(2).

Hinweis: Sie können zwischen verschiedenen superellipse()-Werten und zwischen verschiedenen Eckformen-Schlüsselwörtern flüssig animieren, da die Animation zwischen ihren superellipse()-Äquivalenten interpoliert.

Formale Syntax

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

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

Beispiele

Vergleich der `<corner-shape-value>`-Werte

In diesem Beispiel bieten wir ein Dropdown-Menü an, das es Ihnen ermöglicht, verschiedene <corner-shape-value>-Werte auszuwählen, sowie einen Schieberegler, der den border-radius des Containers aktualisiert. Dies ermöglicht es, die Wirkung der verschiedenen Schlüsselwörter und superellipse()-Parameterwerte zu visualisieren.

Die corner-shape-Eigenschaft definiert die Form der Ecken des Kastens, während die Region, auf die die Form angewendet wird, durch die border-radius-Eigenschaft spezifiziert wird. Der Code wird der Kürze halber verborgen, aber Sie können eine vollständige Erklärung der corner-shape-Werte zusammen mit anderen verwandten Beispielen 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: "Helvetica", "Arial", 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: Sehen Sie sich auch das Beispiel zum superellipse()-Funktion-Wertevergleich an.

Spezifikationen

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

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

<corner-shape-value> CSS-Typ

Help improve MDN

`<corner-shape-value>` CSS-Typ