Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
corner-top-right-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-top-right-shape-Eigenschaft vonCSS legt die Form der oberen rechten Ecke eines Kastens innerhalb desborder-radius-Bereichs fest.
Für eine vollständige Beschreibung des Verhaltens von Eckformen und mehrere Beispiele siehe die Seite zurcorner-shape-Kurzschreibweise.
Syntax
/* Keyword values */corner-top-right-shape: scoop;corner-top-right-shape: square;/* superellipse() function values */corner-top-right-shape: superellipse(2.2);corner-top-right-shape: superellipse(-2.5);/* Global values */corner-top-right-shape: inherit;corner-top-right-shape: initial;corner-top-right-shape: revert;corner-top-right-shape: revert-layer;corner-top-right-shape: unset;Werte
Die Eigenschaftcorner-top-right-shape wird unter Verwendung eines<corner-shape-value>-Wertes angegeben.
Formale Definition
| Anfangswert | round |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf::first-letter. |
| Vererbt | Nein |
| Berechneter Wert | The correspondingsuperellipse() value. |
| Animationstyp | Animates as persuperellipse interpolation. |
Formale Syntax
corner-top-right-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 Referenzseite voncorner-shape.
Grundlegende Verwendung voncorner-top-right-shape
HTML
Das Markup für dieses Beispiel enthält ein einzelnes<div>-Element.
<div></div>CSS
Wir geben dem Kasten einige grundlegende Stile, die wir der Kürze halber ausgeblendet haben. Wir wenden auch einenbox-shadow an sowie einenborder-radius von 60 Pixeln und einecorner-top-right-shape vonbevel.
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: green; 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-top-right-shape: bevel;}Ergebnis
Das gerenderte Ergebnis sieht folgendermaßen aus:
Spezifikationen
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-top-right-shape |
Browser-Kompatibilität
Siehe auch
corner-shape-Kurzschreibweisecorner-top-left-shape,corner-bottom-left-shape, undcorner-bottom-right-shapecorner-start-start-shape,corner-start-end-shape,corner-end-start-shape, undcorner-end-end-shapeborder-radius-Kurzschreibweiseborder-top-right-radius- CSS-Rahmen und Kastenverzierungen-Modul
- CSS-Hintergründe und Rahmen-Modul