Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
corner-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-right-shapeCSS Eigenschaft legt die Form der beiden Ecken an der rechten Kante eines Box-Elements fest, innerhalb ihrerborder-radius-Fläche.
Für eine vollständige Beschreibung des Verhaltens von Eckenformen und mehrere Beispiele, siehe diecorner-shape Kurzschreibweise-Eigenschaftsseite.
Bestandteileigenschaften
Diecorner-right-shape Eigenschaft ist eine Kurzschreibweise für die folgenden physischen Eigenschaften:
Syntax
/* Single keyword value set for both corners */corner-right-shape: bevel;corner-right-shape: notch;/* Single superellipse() value set for both corners */corner-right-shape: superellipse(4);corner-right-shape: superellipse(-0.9);/* Top corner, bottom corner */corner-right-shape: bevel notch;corner-right-shape: notch superellipse(-0.9);/* Global values */corner-right-shape: inherit;corner-right-shape: initial;corner-right-shape: revert;corner-right-shape: revert-layer;corner-right-shape: unset;Werte
Diecorner-right-shape Eigenschaft wird mit einem oder zwei<corner-shape-value> Werten angegeben:
- Wennein Wert verwendet wird, gibt er die Formbeider rechter Ecken an.
- Wennzwei Werte verwendet werden, gibt der erste die Form deroberen rechten Ecke an und der zweite die Form derunteren rechten Ecke.
Formale Definition
Wert in der Datenbank nicht gefunden!Formale Syntax
corner-right-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 dercorner-shape Referenzseite.
Grundlegende Verwendung voncorner-right-shape
HTML
Das Markup für dieses Beispiel enthält ein einzelnes<div> Element.
<div></div>CSS
Wir vergeben dem Box-Element einige grundlegende Stile, die wir der Übersichtlichkeit halber ausgeblendet haben. Außerdem wenden wir einenbox-shadow, einenborder-radius von20% 30% / 50% 40% und einecorner-right-shape vonsquare scoop 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: cyan; 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: 20% 30% / 50% 40%; corner-right-shape: square scoop;}Ergebnis
Das gerenderte Ergebnis sieht so aus:
Spezifikationen
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-right-shape |
Browser-Kompatibilität
Siehe auch
corner-shapeKurzschreibweise-Eigenschaftcorner-top-shape,corner-bottom-shape, undcorner-left-shapecorner-block-start-shape,corner-block-end-shape,corner-inline-start-shape, undcorner-inline-end-shapeborder-radiusKurzschreibweise-Eigenschaftborder-top-right-radiusundborder-bottom-right-radius- CSS borders and box decorations Modul
- CSS backgrounds and borders Modul