Ugrás a fő tartalomra
LibraTool logoLibraTool

Ingyenes CSS lekerekített sarok generátor

Tervezz lekerekített sarkokat vizuálisan minden sarok független vezérlésével. Támogatja az elliptikus X/Y szintaxist organikus blob formákhoz.

Betöltés után offline is működik
border-radius: 20px 20px 20px 20px;
Egység

Gyakori felhasználások

  • Szerves blob alakzatokAz elliptikus X/Y szintaxis segítségével hozzon létre egyedi blob alakzatokat hős szekciókhoz és illusztrációkhoz.
  • Kártya és tároló sarkokStandard lekerekített sarkok kártyákhoz, tárolókhoz és panelekhez a modern felhasználóifelület-tervezésben.
  • Avatar és profilképi alakzatokHozza létre a megfelelő sarok stílust a profilképekhez: kör alakú, squircle vagy kerekített négyzet.
  • Pirulák, címkék és kitűzőkTeljesen kerekített pirulagymbokat, címkéket és kitűzőket hozhat létre a 9999 előbeállítással.
  • Aszimmetrikus saroktervekKeverje a sugarakat a sarkok felett, hogy megkülönböztetett, márka-felismert kártya- és gombformákat hozzon létre.

Hogyan működik

A border-radius generátor teljesen a böngészőben fut — nincs szerver, könyvtár és feltöltés. Közvetlenül JavaScriptben építi fel a CSS border-radius érték-karakterláncot React állapottal és useMemo-val, majd inline stílusként alkalmazza egy élő div elemen, így a böngésző saját CSS motorja valós időben rendereli az alakzatot.

  1. 1
    A csúszkák állapotot írnak
    Minden tartomány-bemenet nyolc numerikus állapotváltozó egyikébe ír — négy vízszintes sarokrádiusz és négy függőleges elliptikus módhoz. Az egyesített mód mind a nyolcat egyetlen csúszkába sűríti egy setAll segédfüggvényen keresztül, amely minden értéket egyszerre szinkronizál.
  2. 2
    Az useMemo összeállítja a CSS-értéket
    Egy useMemo hook újraszámítja a border-radius karakterláncot, amikor bármely sarokérték, mértékegység (px vagy %) vagy elliptikus kapcsoló megváltozik. Standard módban a négyértékű rövidítést állítja elő; elliptikus bekapcsolásával hozzáadja a perjel-elválasztót a teljes nyolcértékű szintaxishoz — pl. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    A böngésző CSS-motorja rendereli az előnézetet
    A kiszámított karakterlánc egy egyszerű div elem inline borderRadius stílusaként kerül beállításra. A böngésző elrendezési motorja végzi az összes renderelést — nincs canvas, nincs SVG, és nincs harmadik féltől származó rajzoló kód.
  4. 4
    A Clipboard API másolja a kimenetet
    A Másolásra kattintás meghívja a navigator.clipboard.writeText-et a CSS deklarációval (border-radius: ...;) vagy az egyenértékű Tailwind tetszőleges-érték osztállyal (rounded-[...]), a kiválasztott formátumkapcsolótól függően.

Kapcsolódó eszközök

🎨

CSS dobozárnyék-generátor

Vizuális szerkesztő CSS box-shadow-hoz élő előnézettel, többrétegű halmozással, színválasztóval, befelé fordítható kapcsolóval és egyetlen kattintással másolható. Material, neumorfizmus és ragyogás előbeállításokat tartalmaz.

Próbálja ki
🟦

CSS Grid generátor

Vizuálisan tervezzen meg egy CSS gridot — sávok, egységek és hézagok — és másolja ki a generált CSS-t és HTML-t.

Próbálja ki
↔️

CSS Flexbox generátor

Kísérletezzen a flex iránytal, becsomagolással, igazítással és helyzeti értékekkel az élő elemeken — és másolja ki a CSS-t.

Próbálja ki

Gyakran ismételt kérdések