Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
corner-inline-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 eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Diecorner-inline-start-shapeCSS Eigenschaft legt die Form beider Ecken an der inline-start Kante einer Box innerhalb ihresborder-radius Bereichs fest.
Für eine vollständige Beschreibung des Verhaltens von Eckenformen und mehrere Beispiele, siehe die Seite zurcorner-shape Kurzschreibweise.
Bestandteileigenschaften
Die Eigenschaftcorner-inline-start-shape ist eine Kurzform für die folgenden logischen Eigenschaften:
Syntax
/* Single keyword value set for both corners */corner-inline-start-shape: round;corner-inline-start-shape: bevel;/* Single superellipse() value set for both corners */corner-inline-start-shape: superellipse(0.5);corner-inline-start-shape: superellipse(-3);/* Block-start/inline-start corner, block-end/inline-start corner */corner-inline-start-shape: round bevel;corner-inline-start-shape: round superellipse(0.5);/* Global values */corner-inline-start-shape: inherit;corner-inline-start-shape: initial;corner-inline-start-shape: revert;corner-inline-start-shape: revert-layer;corner-inline-start-shape: unset;Werte
Die Eigenschaftcorner-inline-start-shape wird mit einem oder zwei<corner-shape-value> Werten angegeben:
- Wirdein Wert verwendet, gibt er die Form beiderinline-start Ecken an.
- Werdenzwei Werte verwendet, gibt der erste die Form derblock-start/inline-start Ecke an, und der zweite die Form derblock-end/inline-start Ecke.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf::first-letter. |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
corner-inline-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
Andere verwandte Beispiele finden Sie auf dercorner-shape Referenzseite.
Grundlegende Verwendung voncorner-inline-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 verborgen haben. Wir wenden auch einenbox-shadow, einenborder-radius von 60 Pixeln und einecorner-inline-start-shape vonsquare bevel an.
body { font-family: "Helvetica", "Arial", sans-serif; width: 240px; margin: 20px auto;}div { width: 100%; height: 180px; display: flex; justify-content: center; align-items: center; background-color: orange; background-image: linear-gradient( to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.5) );}div { box-shadow: 1px 1px 3px gray; border-radius: 60px; corner-inline-start-shape: square bevel;}Ergebnis
Das gerenderte Ergebnis sieht so aus:
Spezifikationen
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-inline-start-shape |
Browser-Kompatibilität
Siehe auch
corner-shapeKurzschreibweisecorner-block-start-shape,corner-block-end-shape, undcorner-inline-end-shapecorner-top-shape,corner-bottom-shape,corner-left-shape, undcorner-right-shapeborder-radiusKurzschreibweiseborder-start-start-radiusundborder-end-start-radius- CSS borders and box decorations Modul
- CSS backgrounds and borders Modul