border-radius: 16px;Der CSS-Grenzradius-Generator ist ein visueller Editor für die CSS-Grenzradius-Eigenschaft. Sie ziehen einen Schieberegler für jede Ecke, schauen sich ein Vorschauelement in Echtzeit an und kopieren das genaue CSS, das es erzeugt, - keine Schätzpixelwerte und das erneute Laden 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.
Wählen Sie eine Voreinstellung wie Rundung, Pille, Kreis oder Blob für einen sofortigen Startpunkt aus oder beginnen Sie an den Standard-Runde-Ecken.
Ziehen Sie die Schieberegler oben links, oben rechts, unten rechts und unten links, um jede Ecke unabhängig zu runden, oder setzen Sie sie alle auf den gleichen Wert für einen einheitlichen Radius.
Wechseln Sie zwischen Px, %, EM und REM. Prozentsätze erzeugen elliptische Ecken relativ zur Elementgröße – Legen Sie 50% an allen Ecken fest, um einen perfekten Kreis oder eine Ellipse zu bilden.
Kopieren Sie die generierte Grenzradius-Deklaration, die bereits in die kürzeste gültige Abkürzung zusammengeklappt wurde, und fügen Sie sie in Ihr Stylesheet ein.
Unabhängige Schieberegler für alle vier Ecken ermöglichen es Ihnen, asymmetrische Formen wie Blatt-, Laschen- und Sprachblasenradien zu erstellen, nicht nur eine einheitliche Rundung
Das Tool bricht automatisch Ihre vier Ecken auf die kürzeste äquivalente Kurzradius-Kurzschrift ein, sodass Ihr CSS sauber und lesbar bleibt
Zwischen Px, %, EM und REM wechseln – Prozentsätze erzeugen elliptische Ecken relativ zur Boxgröße, so wie Kreise und Blobs
Ein Vorschauelement wird beim Ziehen sofort aktualisiert, sodass Sie genau sehen können, wie die Ecken rund sind, bevor Sie etwas kopieren
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity — build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!