Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
<corner-shape-value>
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.
Der<corner-shape-value>CSSDatentyp beschreibt die Form einer Containerecke. Er wird von dercorner-shape Kurzschreibweise und ihrenBestandteil-Eigenschaften verwendet, um die auf die betroffenen Containerecken anzuwendende Form festzulegen.
Syntax
Der<corner-shape-value> Datentyp kann einesuperellipse()-Funktion annehmen, die eine benutzerdefinierte Form definiert, oder einen von sechs Schlüsselwortwerten, die häufigesuperellipse()-Werte beschreiben.
Werte
superellipse()Definiert eine benutzerdefinierte Superellipse-Eckenform. Ein negativer Parameter erzeugt eine nach innen gerichtete oder konkave Kurve, während ein positiver Parameter eine nach außen gerichtete oder konvexe Kurve erzeugt.
- Schlüsselwörter
Die verfügbaren Schlüsselwortwerte sind wie folgt:
bevelDefiniert eine gerade, diagonale Ecke, die weder konvex noch konkav ist. Das Schlüsselwort
bevelentsprichtsuperellipse(0).notchDefiniert eine 90-Grad konkave quadratische Ecke. Das Schlüsselwort
notchentsprichtsuperellipse(-infinity).roundDefiniert eine konvexe Standardellipse, die die Standardrundecke darstellt, die durch
border-radiusohne angewandtecorner-shapeerstellt wird. Das Schlüsselwortroundentsprichtsuperellipse(1). Dies ist der Standardwert (Anfangswert) für allecorner-shapeEigenschaften.scoopDefiniert eine konkave Standardellipse. Das Schlüsselwort
scoopentsprichtsuperellipse(-1).squareDefiniert eine 90-Grad konvexe quadratische Ecke, die die Standardform der Ecke darstellt, wenn kein
border-radius(oderborder-radius: 0) angewendet wird. Das Schlüsselwortsquareentsprichtsuperellipse(infinity).squircleDefiniert einen „Squircle“, der eine konvexe Kurve zwischen
roundundsquaredarstellt. Das Schlüsselwortsquircleentsprichtsuperellipse(2).
Hinweis:Sie können nahtlos zwischen verschiedenensuperellipse() Werten und zwischen verschiedenen Schlüsselwörtern für Eckenformen animieren, da die Animation zwischen derensuperellipse() Äquivalenten interpoliert.
Formale Syntax
<corner-shape-value> =
round|
scoop|
bevel|
notch|
square|
squircle|
<superellipse()>
<superellipse()> =
superellipse(<number>|
infinity|
-infinity)
Beispiele
<corner-shape-value> Wertvergleich
In diesem Beispiel bieten wir ein Dropdown-Menü an, das Ihnen ermöglicht, verschiedene<corner-shape-value> Werte auszuwählen, sowie einen Schieberegler, der dasborder-radius des Containers aktualisiert. Dies ermöglicht die Visualisierung des Effekts der verschiedenen Schlüsselwörter undsuperellipse()-Parameterwerte.
Diecorner-shape-Eigenschaft definiert die Form der Ecken des Kastens, während der Bereich, auf den die Form angewendet wird, durch dieborder-radius-Eigenschaft festgelegt wird. Der Code ist zur Kürze verborgen, aber Sie finden einevollständige Erklärung dercorner-shape-Werte zusammen mit anderen verwandten Beispielen auf dercorner-shape Referenzseite.
<form> <div> <label for="corner-shape-choice">Choose a corner-shape value:</label> <select> <optgroup label="Keywords"> <option value="square">square | superellipse(infinity)</option> <option selected value="squircle">squircle | superellipse(2)</option> <option value="round">round | superellipse(1)</option> <option value="bevel">bevel | superellipse(0)</option> <option value="scoop">scoop | superellipse(-1)</option> <option value="notch">notch | superellipse(-infinity)</option> </optgroup> <optgroup label="Functions"> <option>superellipse(3)</option> <option>superellipse(1.5)</option> <option>superellipse(0.5)</option> <option>superellipse(-0.5)</option> <option>superellipse(-1.5)</option> <option>superellipse(-3)</option> </optgroup> </select> </div> <div> <label for="radius-slider">Choose a border-radius value:</label> <input type="range" min="0" value="45" max="90" step="1" /> </div></form><section></section>html { font-family: "Helvetica", "Arial", sans-serif;}body { width: fit-content; margin: 20px auto;}section { display: flex; justify-content: center; align-items: center; margin-top: 20px;}select { padding: 3px 5px;}form div:nth-of-type(2) { margin-top: 5px; display: flex;}section { width: 100%; height: 180px; background-color: orange; background-image: linear-gradient( to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.5) );}section { box-shadow: 1px 1px 3px gray;}const rectangle = document.querySelector("section");const select = document.querySelector("select");const range = document.getElementById("radius-slider");function setCorners() { rectangle.style.cornerShape = select.value; const brValue = `${range.value}px`; rectangle.style.borderRadius = brValue; rectangle.innerHTML = `<div><code>corner-shape: ${select.value};</code><br><code>border-radius: ${brValue};</code></div>`;}select.addEventListener("change", setCorners);range.addEventListener("input", setCorners);setCorners();Hinweis:Sehen Sie sich auch dassuperellipse() Funktionswert-Vergleichsbeispiel an.
Spezifikationen
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # typedef-corner-shape-value |