corner-block-start-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-block-start-shape CSS Eigenschaft legt die Form beider Ecken an der Blockstartkante eines Kastens innerhalb ihres border-radius Bereichs fest.
Für eine vollständige Beschreibung des Verhaltens von Eckformen und mehrere Beispiele siehe die Seite zur Kurzschreibweise corner-shape.
Zusammengesetzte Eigenschaften
Die corner-block-start-shape Eigenschaft ist eine Kurzschreibweise für die folgenden physischen Eigenschaften:
Syntax
/* Single keyword value set for both corners */
corner-block-start-shape: notch;
corner-block-start-shape: squircle;
/* Single superellipse() value set for both corners */
corner-block-start-shape: superellipse(2.7);
corner-block-start-shape: superellipse(-2.5);
/* Block-start/inline-start corner, block-start/inline-end corner */
corner-block-start-shape: notch squircle;
corner-block-start-shape: notch superellipse(-2.5);
/* Global values */
corner-block-start-shape: inherit;
corner-block-start-shape: initial;
corner-block-start-shape: revert;
corner-block-start-shape: revert-layer;
corner-block-start-shape: unset;
Werte
Die corner-block-start-shape Eigenschaft wird unter Verwendung von einem oder zwei <corner-shape-value> Werten angegeben:
- Wenn ein Wert verwendet wird, bestimmt er die Form beider Blockstart-Ecken.
- Wenn zwei Werte verwendet werden, bestimmt der erste die Form der Blockstart/Inlinestart-Ecke und der zweite die Form der Blockstart/Inlineend-Ecke.
Formale Definition
Wert in der Datenbank nicht gefunden!Formale Syntax
corner-block-start-shape =
<'corner-top-left-shape'>{1,2}
<corner-top-left-shape> =
<corner-shape-value>
<corner-shape-value> =
round |
scoop |
bevel |
notch |
square |
squircle |
<superellipse()>
<superellipse()> =
superellipse( <number [-∞,∞]> |
infinity |
-infinity )
Beispiele
Weitere verwandte Beispiele finden Sie auf der corner-shape Referenzseite.
Grundlegende Verwendung von corner-block-start-shape
HTML
Das Markup für dieses Beispiel enthält ein einzelnes <div> Element.
<div></div>
CSS
Wir geben der Box einige grundlegende Stile, die wir der Kürze halber ausgeblendet haben. Wir fügen auch einen box-shadow, einen border-radius von 40px 60px und eine corner-block-start-shape von scoop notch hinzu.
div {
box-shadow: 1px 1px 3px gray;
border-radius: 40px 60px;
corner-block-start-shape: scoop notch;
}
Ergebnis
Das gerenderte Ergebnis sieht so aus:
Spezifikationen
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4> # propdef-corner-block-start-shape> |
Browser-Kompatibilität
Loading…
Siehe auch
corner-shapeKurzschreibweisecorner-block-end-shape,corner-inline-start-shape, undcorner-inline-end-shapecorner-top-shape,corner-bottom-shape,corner-left-shape, undcorner-right-shapeborder-radiusKurzschreibweiseborder-start-start-radiusundborder-start-end-radius- CSS borders and box decorations Modul
- CSS backgrounds and borders Modul