Wie CSS-Grenzradius funktioniert: Kurzschrift, Prozentsätze, Kreise und Pillenformen

border-radius Ist eine der ersten CSS Eigenschaften die die meisten Menschen lernen und eine der letzten die sie vollständig verstehen, alle vier Ecken einer Karte um 12 Pixel abrunden ist einfach Dann muss ein Knopf eine Pille in jeder Breite sein, ein Avatar muss ein Kreis sein, eine Chatblase braucht eine scharfe Ecke, und plötzlich die Kurzschrift Reihenfolge, der Unterschied zwischen 50% und 999pxund einen Radius, der " stoppt Wachstum und Angebot; alles wichtig.

In diesem Handbuch wird erläutert, wie die Eigenschaft von der Spezifikation an funktioniert: was jede Wertzahl bedeutet, wie sich Prozentsätze von Pixeln unterscheiden, wie Browser zu große Radien skalieren, wie man gemeinsame Formen erstellt und warum abgerundete Ecken manchmal nicht angezeigt werden Die Beispiele werden anhand der überprüft CSS-Grenzradius-Generator, die jede Ecke live in der Vorschau anzeigt und die kürzeste gültige Kurzschrift ausgibt Es ist eine der CSS-Tools auf Toolz.

tl; dr: border-radius Rundung eines Elements' s Ecken Ein Wert setzt alle vier Ecken, zwei Werte setzen die Paare oben-links/unten-rechts und oben-rechts/unten-links, drei Werte setzen oben-links, dann oben-rechts und unten-links zusammen, dann unten-rechts, und vier Werte laufen im Uhrzeigersinn von oben-links Pixelradien sind feste Kurven; Prozentsätze werden getrennt gegen Breite und Höhe gemessen, also 50% Kreis nur auf einem Quadrat macht, Wenn sich Radien entlang einer Seite zu mehr als der Seite summieren, skaliert der Browser jeden Radius proportional nach unten Die Grenzradiusgenerator Handhabt die Kurzschrift für Sie, clientseitig, kostenlos, ohne Anmeldung.

Was macht die CSS-Grenzradius-Eigenschaft?

der border-radius Eigenschaft rundet die äußeren Ecken eines Elements ab' s Randfeld Jede Ecke wird zu einem Viertel einer Ellipse mit horizontalem Radius und vertikalem Radius, wenn beide Radien gleich sind, ist die Ecke ein Viertelkreis.

Sie ist im W3 C definiert CSS-Hintergründe und -Grenzen Modul Level 3und wird seit über einem Jahrzehnt in jedem größeren Browser vorbehaltslos unterstützt, sodass keine Anbieterpräfixe erforderlich sind.

Die Rundung betrifft mehr als die Grenzlinie Der Hintergrund von Element's wird auf die abgerundete Form geschnitten, box-shadow Der Kurve folgt, und in modernen Browsern auch outline. Inhalte innerhalb des Elements werden nicht geclippt, es sei denn, Sie fügen hinzu overflow: hidden, was der häufigste Grund dafür ist, dass abgerundete Ecken zu versagen scheinen.

Wie funktioniert die Grenzradius-Kurzschrift?

border-radius ist eine Abkürzung für vier Langhand-Eigenschaften: border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius. Die Anzahl der Werte, die Sie angeben, entscheidet, auf welche Ecken jeder Wert zutrifft.

Werte	Beispiel	Oben links	Oben rechts	Unten rechts	Unten links
1	border-radius: 16px;	16px	16px	16px	16px
2	border-radius: 24px 8px;	24px	8px	24px	8px
3	border-radius: 24px 8px 0px;	24px	8px	0px	8px
4	border-radius: 20px 10px 5px 0px;	20px	10px	5px	0px

Das Muster ist die gleiche Reihenfolge im Uhrzeigersinn, die auch von verwendet wird margin und paddingten, beginnend von der oberen linken Ecke statt der oberen Seite Fehlende Werte werden von ihrem Diagonalpartner ausgefüllt: mit zwei Werten, unten rechts Kopien oben-links und unten-links Kopien oben-rechts Mit drei, unten-links Kopien oben-rechts.

Der Generator kehrt diesen Vorgang umSie stellen jede Ecke mit einem eigenen Schieberegler ein, und er schreibt die wenigsten Werte, die die gleiche Form erzeugen:

• Alle vier Ecken gleich ergibt einen Wert.
• Oben-links gleich unten-rechts und oben-rechts gleich unten-links ergibt zwei Werte.
• Oben-rechts gleich unten-links (aber die andere Diagonale unterscheidet sich) ergibt drei Werte.
• Alles andere ergibt vier.

Eine Konsequenz überrascht die Leute Runden Sie nur die obere linke Ecke um 20 px und die Ausgabe ist border-radius: 20px 0px 0px;, nicht der Vierwert 20px 0px 0px 0px. Beides ist richtig; die Drei-Wert-Form ist kürzer, da oben-rechts und unten-links beide Null sind Jeder Wert behält seine Einheit, also druckt eine Null-Ecke als 0pxdrohen

Was ist der Unterschied zwischen Px und % für Grenzradius?

Ein Pixelradius ist eine absolute Größe Ein prozentualer Radius ist relativ zur Größe des Elements's, und die horizontalen und vertikalen Teile werden getrennt gemessen: der horizontale Radius gegen die Breite, der vertikale Radius gegen die Höhe.

Auf einem Quadrat sind das die gleiche Zahl Auf einem Rechteck sind sie es nicht, weshalb 50% Verwandeln Sie ein Quadrat in einen Kreis, aber ein Rechteck in eine Ellipse.

Nehmen Sie die Vorschaubox Generator's, die 224 px breit und 160 px hoch ist:

schätzen	Horizontaler Radius	Vertikaler Radius	Form
16px	16px	16px	Abgerundetes Rechteck, kreisförmige Ecken
50%	112 x (50% von 224)	80 px (50% von 160)	Ellipse
25%	56px	40px	Abgerundetes Rechteck, elliptische Ecken
999px	999 px, skaliert auf 80 px	999 px, skaliert auf 80 px	Pille mit runden Enden

Die anderen beiden Einheiten verhalten sich wie Pixel, sobald sie aufgelöst sind. em Relativ zum Element's eigene Schriftgröße und rem zur Stammschriftgröße, also 1rem 16 px mit Standard-Browser-Einstellungen ist Verwenden von em oder rem Ecken mit Textgröße skalieren lässt, was zu Schaltflächen und Tags passt, die mit ihrem Etikett wachsen.

Im Generator laufen Schieberegler von 0 bis 200 für px, 0 bis 50 für %, und 0 bis 10 für em und rem, in Ganzzahlschritten, das Umschalten der Einheit behält die Zahlen und vertauscht die Einheit, so wird aus 16 px 16%, kein umgerechneter Wert.

Warum wird ein großer Grenzradius nicht mehr runder?

Weil die Spezifikation keine Überlappung von Eckkurven zulässt Wenn sich die Radien auf einer Seite zu mehr als dieser Seite addieren' s Länge, schrumpft der Browser jeden Radius auf dem Element um den gleichen Faktor, bis sie passen.

der Ecküberlappungsregel Funktioniert so Für jede der vier Seiten dividieren Sie die side' s Länge durch die Summe der beiden Radien, die sie berühren Nehmen Sie das kleinste dieser Verhältnisse, nennen Sie es f. Wenn f kleiner als 1 ist, multiplizieren Sie jeden Radius mit f.

Hier ist die Berechnung für border-radius: 999px Auf der 224 x 160-Vorschaubox:

top and bottom sides:  224 / (999 + 999) = 0.1121
left and right sides:  160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801)                  = 0.0801
every radius: 999 × 0.0801               ≈ 80px

Jede Ecke hat am Ende einen Radius von 80 px, genau die Hälfte der 160 px Höhe, so werden die kurzen Enden zu perfekten Halbkreisen, das Gleiche passiert bei 200 px, der Oberseite des Pixelschiebers: f ist 160 / 400 = 0,4, und 200 × 0,4 ist wieder 80 px. Hinter der Hälfte der kürzeren Seite hört ein Pixelradius auf, etwas zu ändern.

Es folgen zwei praktische Ergebnisse Ein Pillenknopf kann jeden sehr großen Pixelwert verwenden, und er bleibt eine Pille in jeder Breite Und weil die Skalierung über alle vier Ecken proportional ist, schrumpft eine einzelne übergroße Ecke auch die anderen Oben-links auf 999 px setzen und den Rest bei 20 px belassen, und die 20 px Ecken werden damit verkleinert.

Wie macht man mit dem Grenzradius gemeinsame Formen?

Die meisten abgerundeten Formen in Schnittstellen stammen aus einer Handvoll Rezepten Der Generator hat Voreinstellungen für die gängigen.

Form	CSS	Notizen
Scharf	border-radius: 0px;	Die Voreinstellung für die meisten Elemente
Subtil	border-radius: 6px;	Eingaben, kleine Tasten
Karte	border-radius: 12px;	Tafeln und Karten
Abgerundet	border-radius: 16px;	Der Generator's-Startwert
Pille	border-radius: 999px;	Funktioniert über Überlappungsskalierung in jeder Breite
Kreis	border-radius: 50%;	Benötigt gleiche Breite und Höhe
Blatt	border-radius: 0px 24px;	Zwei gegenüberliegende Ecken abgerundet
Blob	border-radius: 60% 40%;	Organische Form aus ungleichen Prozentsätzen
Sprechblase	border-radius: 16px 16px 16px 0px;	Eine scharfe Ecke in der Nähe des Lautsprechers
Tab	border-radius: 8px 8px 0px 0px;	Abgerundete Oberseite, flache Unterseite

Kreis. Set 50% Auf einem Element mit gleicher Breite und Höhe Für Avatare hinzufügen aspect-ratio: 1 und object-fit: cover Auf dem Bild erstreckt sich ein nicht quadratisches Foto nicht zu einer Ellipse.

Pille. Verwenden Sie lieber einen großen Pixelwert als 50%. Auf einem breiten Knopf, 50% Erzeugt eine Ellipse mit spitz aussehenden Enden, da der horizontale Radius die halbe Breite beträgt. 999px Wird stattdessen auf die Hälfte der Höhe skaliert, was runde Enden ergibt.

Blob. Die Voreinstellung 60% 40% Setzt oben-links und unten-rechts auf 60% und die anderen zwei auf 40% Auf der Vorschaubox sind die horizontalen Radien entlang der Oberkante 134,4 px und 89,6 px, die sich auf genau 224 px summieren, so dass keine Skalierung auftritt und die beiden Kurven sich treffen, ohne dass eine gerade Kante zwischen ihnen übrig bleibt Voreinstellungen können über den Schiebereglerbereich hinausgehen: Blob verwendet 60%, Pill verwendet 999 px, und die Ausgabe behält diese Werte, bis Sie einen Schieberegler bewegen.

Sprechblase und Tab. Keine der beiden Formen hat ein passendes Diagonalpaar, daher benötigen beide alle vier Werte, Legen Sie die Ecken einzeln im Generator fest und es bestätigt, dass keine kürzere Form existiert.

Was ist die Slash-Syntax im Border-Radius?

Ein Schrägstrich trennt horizontale Radien von vertikalen Radien, sodass jede Ecke eine nicht kreisförmige Ellipse mit direkt gewählten Größen sein kann.

/* horizontal radii / vertical radii */
.lens {
  border-radius: 50% / 20%;
}

/* four horizontal, then four vertical */
.egg {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Die Werte auf jeder Seite des Schrägstrichs folgen den gleichen Ein-zu-Vier-Regeln wie bei der normalen Kurzschrift Der Toolz-Generator schreibt keine Schrägstrichsyntax: Er setzt einen Radius pro Ecke, der Kreise, Pillen, Karten und Kleckse abdeckt, bei Eierformen und benutzerdefinierten Linsenformen starten Sie vom Generator' s-Ausgang und fügen Sie den Schrägstrich von Hand hinzu.

Warum zeigen sich meine abgerundeten Ecken nicht?

Wann border-radius Scheint nichts zu tun, die Ursache ist fast immer eine davon.

Symptom	Ursache	Fix
Bild oder Kind stochert aus den Ecken	Kinder werden standardmäßig nicht geclippt	Hinzufügen overflow: hidden zum abgerundeten Elternteil, oder auch um das Kind herum
Überhaupt keine sichtbare Veränderung	Element hat keinen Hintergrund, keine Grenze oder keinen Schatten	Geben Sie ihm eine Hintergrundfarbe oder einen Rand, damit die Form sichtbar ist
Tischecken bleiben quadratisch	border-collapse: collapse Auf dem Tisch	einsetzen border-collapse: separate trotz border-spacing: 0oder eine Hülle runden
Kreis sieht aus wie ein Oval	Breite und Höhe unterscheiden sich	Gleiche Maße festlegen oder aspect-ratio: 1
Pille hat spitze Enden	Mittels 50% Auf einem breiten Element	Verwenden Sie einen großen px-Wert wie 999px
Radius hört auf zuzunehmen	Überlappungsskalierung	Erwartet; Der Radius ist auf die Hälfte der kürzeren Seite begrenzt
Ecken der inneren Elemente sehen dicker aus	Der Innenradius entspricht dem Außenradius innerhalb der Polsterung	Stellen Sie den Innenradius auf den Außenradius minus der Polsterung ein

Die letzte ist dezent Eine Karte mit border-radius: 16px und padding: 8px Ein Bild mit dem gleichen 16 px Radius enthalten, sieht ungleichmäßig aus, denn die innere Kurve sollte enger sein Der innere Radius, der der äußeren Kurve folgt, ist 16 minus 8, also 8 px.

Wie verbindet sich Grenzradius mit Schatten und Gefälle?

Abgerundete Ecken werden selten alleine versendet, eine Karte hat meist einen Schatten und oft einen Verlaufshintergrund, und beide folgen automatisch der abgerundeten Form.

box-shadow Verfolgt die abgerundete Randbox, so dass ein weicher Schatten unter einer 12-px-Karte ohne zusätzliche Arbeit 12-px-gerundete Ecken hat Die Kastenschattengenerator Vorschauen auf Schatten auf einem abgerundeten Element, und die Kastenschattenführer Versatz, Unschärfe und Spreizwerte dahinter erklärt.

Hintergründe, einschließlich Farbverläufe, werden ebenfalls an der abgerundeten Form befestigt. Um die Füllung zu entwerfen, verwenden Sie die CSS-Gradientengenerator; die CSS-Gradientenführer Durch die Syntax geht, sollte die Eckgröße mit dem Viewport skalieren, anstatt fix zu bleiben, wird die CSS-Klemmgenerator baut ein clamp() Wert, den Sie als Radius verwenden können, zum Beispiel eine Karte, die auf Telefonen 8 px und auf Breitbildschirmen 20 px beträgt.

Mit dem Generator, Schritt für Schritt

1. Wählen Sie eine Voreinstellung Wie Karte, Pille, Kreis oder Blob, oder beginnen Sie bei den standardmäßigen 16-fach-Ecken.
2. Ecken anpassen. Der Eckumschalter ist standardmäßig auf Unabhängig, wo jeder Schieberegler nur seine eigene Ecke bewegt Wechseln Sie ihn zu Linked, um alle vier zusammen zu bewegen.
3. Wählen Sie eine Einheit: px, %, em oder rem.
4. Überprüfen Sie die Vorschau. Die Verlaufsbox wird beim Ziehen aktualisiert, einschließlich der Überlappungsskalierung bei großen Werten.
5. Kopieren Sie das CSS. Die CSS-Taste Kopieren kopiert das Ganze border-radius: Erklärung in ihrer kürzesten Form.

Alles läuft clientseitig: Vorschau und Code werden von JavaScript in Ihrem Browser generiert, nichts wird hochgeladen, und die Seite funktioniert nach dem Laden offline weiter Wenn Sie bereit sind, Öffnen Sie den GrenzradiusgeneratorStellen Sie Ihre Ecken ein und fügen Sie die Deklaration direkt in Ihr Stylesheet ein.