[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/de/docs/Web/CSS/Reference/Properties/corner-bottom-left-shape [Back]  [Original]

corner-bottom-left-shape CSS property - CSS | MDN

Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.

View in English Always switch to English

corner-bottom-left-shape CSS property

Eingeschrnkt verfgbar

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

Want more browser support for this feature? Tell us why.

Experimentell: Dies ist eine experimentelle Technologie
berprfen Sie die Browser-Kompatibilittstabelle sorgfltig vor der Verwendung auf produktiven Webseiten.

Die corner-bottom-left-shape CSS-Eigenschaft spezifiziert die Form der unteren linken Ecke eines Kastens innerhalb der border-radius-Flche.

Fr eine vollstndige Beschreibung des Verhaltens von Eckformen und mehrere Beispiele sehen Sie auf der Seite der corner-shape-Kurzschreibweise nach.

In diesem Artikel

Syntax

css
/* Keyword values */
corner-bottom-left-shape: bevel;
corner-bottom-left-shape: round;

/* superellipse() function values */
corner-bottom-left-shape: superellipse(0.7);
corner-bottom-left-shape: superellipse(-1.9);

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

Werte

Die corner-bottom-left-shape-Eigenschaft wird mithilfe eines <corner-shape-value>-Wertes angegeben.

Formale Definition

Anfangswertround
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter WertThe corresponding superellipse() value.
AnimationstypAnimates as per superellipse interpolation.

Formale Syntax

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

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

<superellipse()> =
superellipse( <number> |
infinity |
-infinity )
Diese Syntax spiegelt den neuesten Standard gem CSS Borders and Box Decorations Module Level 4 wider. Mglicherweise haben nicht alle Browser jeden Teil implementiert. Siehe Browserkompatibilitt fr Informationen zur Untersttzung.

Beispiele

Weitere verwandte Beispiele finden Sie auf der corner-shape-Referenzseite.

Grundlegende Nutzung von corner-bottom-left-shape

HTML

Das Markup fr dieses Beispiel enthlt ein einzelnes <div>-Element.

html
<div></div>

CSS

Wir geben dem Kasten einige grundlegende Stile, die wir der Krze halber verborgen haben. Wir wenden auch einen box-shadow, einen border-radius von 80px 40% 60px 20%, und eine corner-bottom-left-shape von squircle an.

css
div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 80px 40% 60px 20%;
  corner-bottom-left-shape: squircle;
}

Ergebnis

Das gerenderte Ergebnis sieht folgendermaen aus:

Spezifikationen

Spezifikation
CSS Borders and Box Decorations Module Level 4
# propdef-corner-bottom-left-shape

Browser-Kompatibilitt

Siehe auch


Web Proxy Viewer  |  New URL  |  Original Page