corner-shape

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 corner-shape Shorthand-Eigenschaft CSS spezifiziert die Form der Ecken eines Kastens innerhalb des Bereichs, der durch den Wert der border-radius Eigenschaft angegeben wird.

Bestandteileigenschaften

Die corner-shape Eigenschaft ist eine Kurzform für die folgenden physischen Eigenschaften:

Syntax

css

/* Single value set for all four corners */
corner-shape: bevel;

/* top-left and bottom-right, top-right and bottom-left */
corner-shape: notch superellipse(0.6);

/* top-left, top-right and bottom-left, bottom-right */
corner-shape: superellipse(-1.2) square squircle;

/* top-left, top-right, bottom-right, bottom-left */
corner-shape: scoop superellipse(-1.6) superellipse(-2.2) round;

/* Global values */
corner-shape: inherit;
corner-shape: initial;
corner-shape: revert;
corner-shape: revert-layer;
corner-shape: unset;

Die corner-shape Eigenschaft kann mithilfe von einem, zwei, drei oder vier <corner-shape-value> Werten angegeben werden:

Wird ein Wert verwendet, gibt er die Form aller vier Ecken an.
Bei zwei Werten gilt der erste Formwert für die obere linke und untere rechte Ecke, und der zweite für die obere rechte und untere linke Ecke.
Bei drei Werten definiert der erste Wert die Form der oberen linken Ecke, der zweite Wert die obere rechte und untere linke Ecke, und der dritte die untere rechte Ecke.
Bei vier Werten definieren sie der Reihe nach (im Uhrzeigersinn) die Form der oberen linken, oberen rechten, unteren rechten und unteren linken Ecke.

Werte

<corner-shape-value>: Ein superellipse() oder ein gleichwertiges Schlüsselwort, das die Form der Ecke beschreibt.

Die corner-shape Eigenschaft wird verwendet, um die Form abgerundeter Ecken zu modifizieren, die durch die border-radius Eigenschaft und ihre verbundenen Langformen erstellt wurden. Bereits abgerundete Ecken können weiter in Bezug auf den Grad der Rundung angepasst werden, was die Erstellung von beispielsweise abgeschrägten, gekerbten und quadratischen Ecken ermöglicht. Grenzen, Umrisse, Schatten und Hintergrundeffekte, die auf das Container-Element angewendet werden, folgen der definierten Form der Ecken.

Wenn ein border-radius nicht angewendet wird oder der border-radius auf 0 aufgelöst wird, hat corner-shape keine Wirkung.

Die corner-shape Kurzform und ihre zugehörigen corner-*-shape Kurzformen und Langformen akzeptieren ein bis vier <corner-shape-value> Werte. Jeder wird direkt als superellipse() Funktion oder ein Schlüsselwort für eine häufige Form angegeben. Jedes Schlüsselwort entspricht einem spezifischen superellipse() Wert.

Der Standardwert (Initialwert) von corner-shape ist round, was den gleichen Effekt hat wie die Verwendung von border-radius alleine, ohne corner-shape. Es gibt auch den Schlüsselwortwert square, der den Effekt von standardmäßigen quadratischen Ecken hat und effektiv jeglichen angewendeten border-radius entfernt. Der bevel Wert hat den Effekt, eine gerade Linie zwischen den beiden Enden eines border-radius zu ziehen.

Unterschiedliche corner-shape Werte können flüssig animiert werden, da die superellipse() Entsprechungen der Schlüsselwortwerte als Interpolationswerte verwendet werden.

Die corner-shape Kurzform ist besonders nützlich, wenn alle vier Ecken gleich sein sollen, oder unterschiedliche Werte mit einer einzigen Deklaration gesetzt werden sollen. Um nur eine oder zwei Ecken gleichzeitig festzulegen, verwenden Sie die corner-*-shape Kurz- und Langformen.

`corner-*-shape` Kurz- und Langformen

Die corner-shape Kurzform definiert die Formen aller vier Ecken in einer Erklärung.

Um jeweils nur eine Ecke zu definieren, verwenden Sie die Langformen der Ecken:

Physikalische Langformen für Ecken:
Logische Langformen für Ecken:

Um zwei Ecken gleichzeitig festzulegen, verwenden Sie die Seitenkurzformen:

Physikalische Seitenkurzformen:
Logische Seitenkurzformen:

Einschränkung der gegenüberliegenden Eckenradien

Wenn gegenüberliegende Ecken border-radius und corner-shape Werte haben, die dazu führen würden, dass sich die Formen überlappen, beschränkt der Browser die Werte, um das Überlappen zu verhindern.

Zum Beispiel würden die folgenden Werte dazu führen, dass sich die obere linke und untere rechte Ecke überlappen, daher passt der Browser die erste border-radius Komponente an einen Wert an, der dies verhindert.

css

div {
  width: 480px;
  height: 200px;
  background-color: goldenrod;
  border-radius: 80% 20px;
  corner-shape: scoop;
}

Eigenschaften, die der Form der Ecke folgen

Die folgenden Eigenschaften folgen alle der Form der Ecke, wenn sie auf das Container-Element gesetzt werden:

Weitere Informationen finden Sie in der Demonstration der Eigenschaften, die der corner-shape folgen.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

corner-shape = 
  <'corner-top-left-shape'>{1,4}  

<corner-top-left-shape> = 
  <corner-shape-value>  

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

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

Beispiele

Grundlegende Verwendung von `corner-shape`

HTML

Das Markup für dieses Beispiel enthält ein einzelnes <div> Element.

html

<div>Nice scooped corners</div>

CSS

Wir geben dem Kasten eine feste height, einen box-shadow, einen border-radius von 30 Pixeln und eine corner-shape von scoop sowie einige zusätzliche Stile, die wir zur Übersichtlichkeit weggelassen haben.

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: cyan;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

@supports not (corner-shape: scoop) {
  body {
    all: unset !important;
  }

  body::before {
    content: "Your browser does not support the 'corner-shape' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
  }

  body > * {
    display: none;
  }
}

css

div {
  height: 180px;
  box-shadow: 1px 1px 3px gray;
  border-radius: 30px;
  corner-shape: scoop;
}

Ergebnis

Das gerenderte Ergebnis sieht so aus:

Beachten Sie, wie der corner-shape Wert von scoop das Element konkave Ecken gibt — die Kurve ist eine Inversion der Standard-border-radius Kurve. Beachten Sie auch, wie der Hintergrund, die Grenze und der Box-Schatten der Form der Kurve folgen.

Demonstration der Eigenschaften, die der `corner-shape` folgen

HTML

Das Markup für dieses Beispiel enthält ein einzelnes <div> Element mit etwas Textinhalt darin.

html

<div>
  Some styles follow the corner shape, such as border, outline, box-shadow,
  overflow, and backdrop-filter. This is useful for helping various aspects of
  your design to not clash. As shown, it can result in some interesting visual
  effects, so you should test your design carefully.
</div>

CSS

Um zu demonstrieren, wie einige Stile der Form der Ecken eines Containers folgen, wenden wir ein background-image auf das Dokument <body> an, dann setzen wir einen border-radius von 40px und ein corner-shape von scoop notch auf das <div>.

Dann wenden wir auf das <div> das Folgende an:

Eine halbtransparente background-color.
Eine andere Farbe und Art von border auf jeder Kante.
Einen backdrop-filter, der das auf das <body> gesetzte background-image invertiert.
Einen :hover Stil, sodass Sie sehen können, dass der klickbare Inhaltsbereich außerhalb der Eckform liegt.

Weitere Setup-Stile wurden zur Übersichtlichkeit weggelassen.

html {
  height: 100%;
}

body {
  font-family: "Helvetica", "Arial", sans-serif;
  height: inherit;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 240px;
  height: 180px;
}

@supports not (corner-shape: scoop notch) {
  body {
    all: unset !important;
  }

  body::before {
    content: "Your browser does not support the 'corner-shape' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
  }

  body > * {
    display: none;
  }
}

css

body {
  background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
    no-repeat;
  background-size: cover;
}

div {
  border-radius: 40px;
  corner-shape: scoop notch;
  background-color: rgb(255 255 255 / 0.2);
  border-top: 3px solid blue;
  border-left: 6px dashed red;
  border-bottom: 9px solid yellow;
  border-right: 12px double green;
  backdrop-filter: invert(100%);
}

div:hover {
  background-color: white;
}

Ergebnis

Das gerenderte Ergebnis sieht so aus:

Beachten Sie, wie die meisten der gesetzten Stile der Form des <div>, die durch seine corner-shape Stile resultiert, folgen, aber nicht alle. Der Inhalt wird relativ zur ursprünglichen Box angezeigt, und der Hover-Effekt wird trotzdem angewendet, wenn Sie über den Text fahren, der über den oberen und unteren linken Ecken hinausragt.

Vergleich der `corner-shape` Werte

In dieser Demonstration können Sie verschiedene corner-shape Werte auswählen und verschiedene border-radius Werte auf einen Container setzen und die Effekte vergleichen.

HTML

Das Markup für dieses Beispiel enthält einen <select> Picker, aus dem verschiedene corner-shape Werte ausgewählt werden können, einen <input type="range"> Schieberegler, um verschiedene border-radius Werte auszuwählen, und ein <section> Element, auf das diese Werte angewendet werden können. Die select <option> Elemente bieten mehrere Schlüsselwort- und superellipse() Wertoptionen, unterteilt in zwei Gruppen mit <optgroup> Elementen. Bei den Schlüsselwortwerten haben wir auch den superellipse() Wertäquivalent für jeden hinzugefügt, getrennt durch ein Pipe-Zeichen.

html

<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>

CSS

Wir wenden einen box-shadow auf die <section> an. Wir geben auch der <section> und den Formularelementen einige grundlegende Stile, die zur Übersichtlichkeit weggelassen wurden.

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: gold;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

@supports not (corner-shape: scoop) {
  body {
    all: unset !important;
  }

  body::before {
    content: "Your browser does not support the 'corner-shape' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
  }

  body > * {
    display: none;
  }
}

css

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();

Das JavaScript, das die vom Benutzer ausgewählten Werte auf die <section> anwendet, wurde zur Übersichtlichkeit weggelassen.

Ergebnis

Das gerenderte Ergebnis sieht so aus:

Versuchen Sie, verschiedene Werte auszuwählen, um zu sehen, wie sich dies auf die Form der Ecken auswirkt.

Vergleich der `superellipse()` Werte

In diesem Beispiel bieten wir zwei <input type="range"> Schieberegler an, mit denen Sie durch viele verschiedene corner-shape superellipse() Werte und border-radius Werte blättern können, um die Effekte jedes auf einen Container zu vergleichen.

HTML

Das Markup für dieses Beispiel enthält zwei <input type="range"> Elemente, aus denen verschiedene corner-shape superellipse() und border-radius Werte ausgewählt werden können, und ein <section> Element, auf das diese Werte angewendet werden können.

html

<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"
      step="1" />
  </div>
</form>
<section></section>

CSS

Wir wenden einen box-shadow auf das <section> Element an. Zusätzliche grundlegende Stile wurden zur Übersichtlichkeit weggelassen.

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;
}

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)
  );
}

@supports not (corner-shape: superellipse(0)) {
  body {
    all: unset !important;
  }

  body::before {
    content: "Your browser does not support the 'corner-shape' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
  }

  body > * {
    display: none;
  }
}

css

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();

Das JavaScript, das die vom Benutzer ausgewählten Werte auf die <section> anwendet, wurde zur Übersichtlichkeit weggelassen.

Ergebnis

Das gerenderte Ergebnis sieht so aus:

Versuchen Sie, verschiedene Werte auszuwählen, um zu sehen, wie sich dies auf die Form der Ecken auswirkt.

Animation der `corner-shape`

In diesem Beispiel demonstrieren wir, wie die corner-shape Eigenschaft animiert werden kann.

HTML

html

<div></div>

CSS

Wir erstellen eine Reihe von @keyframes, die sanft zwischen den corner-shape Werten von square und notch animieren. Dann wenden wir eine animation an, die auf diese @keyframes basiert, wenn das enthaltende <html> Element überfahren oder fokussiert wird. Zusätzliche grundlegende <div> Stile wurden zur Übersichtlichkeit weggelassen.

body {
  width: 200px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 200px;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
  box-shadow: 1px 1px 3px gray;
  border-radius: 50%;
  corner-shape: square;
  outline: none;
}

@supports not (corner-shape: square) {
  body {
    all: unset !important;
  }

  body::before {
    content: "Your browser does not support the 'corner-shape' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
  }

  body > * {
    display: none;
  }
}

css

@keyframes corner-pulse {
  0% {
    corner-shape: square;
  }

  /* To make the starting point apparent, let us keep
  the shape the same for a small duration. */
  20% {
    corner-shape: square;
  }

  100% {
    corner-shape: notch;
  }
}

div {
  animation: corner-pulse infinite alternate 4s linear;
}

Ergebnis

Das gerenderte Ergebnis sieht so aus:

Spezifikationen

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

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