CSS-Border-Radius-Generator

Der CSS Border Radius Generator ist ein visueller Editor für die CSS-Grenzradius-Eigenschaft. Sie ziehen einen Schieberegler für jede Ecke, sehen sich ein Vorschauelement in Echtzeit an und kopieren genau das CSS, das es erzeugt - kein Erraten von Pixelwerten und Neuladen der Seite.

Die Eigenschaft Border-Radius sieht einfach aus, hat aber eine kompakte Kurzschrift, die Menschen nach oben stößt: Ein Wert rundet alle vier Ecken, zwei Werte setzen die beiden Diagonalen und vier Werte laufen im Uhrzeigersinn von oben links ab. Mit diesem Tool können Sie jede Ecke unabhängig einstellen und dann die kürzeste gleichwertige Kurzschrift automatisch ausgeben, damit Ihr CSS sauber bleibt.

Alles läuft in Ihrem Browser. Beginnen Sie mit einer Voreinstellung wie Karte, Pille, Kreis oder Blob, stimmen Sie jede Ecke ab, wechseln Sie die Einheit zwischen Pixeln und Prozentsätzen und kopieren Sie die Deklaration. Kein Konto, kein Upload und es funktioniert weiterhin offline, sobald die Seite geladen wurde.

Prozentsätze und Pixel verhalten sich auf allem, was nicht quadratisch ist, unterschiedlich, und der Unterschied überrascht die Menschen Ein Pixelradius ist an jeder Ecke die gleiche Kurve, während ein Prozentsatz an jeder Achse separat gemessen wird, so dass 50 Prozent auf einer breiten Box eine Ellipse statt eines Kreises ergeben Das ist die Eigenschaft, die ein Rechteck in eine Pille oder eine Linsenform verwandelt Die Spezifikation schützt Sie auch vor einer unmöglichen Geometrie: Wenn die Radien entlang einer Kante mehr ergeben als die Länge dieser Kante, skaliert der Browser jeden Radius auf dem Element proportional nach unten, anstatt sie zu überlappen, sodass ein großer Wert leise aufhört zu wachsen. Output verwendet den kürzesten gültigen Shorthand, weshalb vier gleiche Ecken zu einer einzigen Zahl kollabieren.

Als Grenzradius-CSS-Generator ist der nützliche Teil, dass er die Kurzschrift für Sie macht Setzen Sie oben links und unten rechts auf 24 und oben rechts und unten links auf 8, in px, und die Ausgabe liest grenzradius: 24 px 8 px; weil die Diagonalpaare übereinstimmen Drop Bottom Right auf 0 und es wird der dreiwertige 24 px 8 px 0 px, da Top Right und Bottom Left immer noch übereinstimmen Sie können jedes Ergebnis vor dem Kopieren gegen die Vorschau überprüfen, wofür ein CSS-Grenzradius-Generator ist.