Liigu põhisisu juurde
LibraTool logoLibraTool

CSS-äärekurvi generaator tasuta

Kujunda visuaalselt ümarnurgad iga nurga sõltumatu juhtimisega. Toetab elliptilist X/Y süntaksit orgaaniliste blobi kujundite jaoks.

Töötab võrguühenduseta pärast laadimist
border-radius: 20px 20px 20px 20px;
Ühik

Levinud kasutusviisid

  • Orgaanilised Blob KujudKasutage elliptilist X/Y süntaksit, et luua unikaalseid blob kujusid kangelase jaotistele ja illustratsioonidele.
  • Kaardi ja Konteineri NurgadStandardsed ümardatud nurgad kaartidele, konteineritele ja paneelitele modernses UI kujunduses.
  • Avatar & Profiilipildi KujudLooge õige nurga stiil profiilipiltidele: ringikujuline, squircle või ümardatud ruut.
  • Pillid, Sildid ja MärgidEhitage täiuslikult ümardatud pilli nupud, sildid ja märgid 9999 eelistusega.
  • Asümeetriline Nurga KujundusSeguge raadiused üle nurkade, et luua eristuvad, kaubamärgiga teadaoleval kaardi ja nupu kujud.

Kuidas see töötab

Border-radius generaator töötab täielikult brauseris — servet, teeki ega üleslaadimist pole. See ehitab CSS border-radius väärtusstringi otse JavaScriptis React'i oleku ja useMemo abil, ning rakendab selle seejärel reasisese stiilina elava div-elemendi peal, nii et brauseri enda CSS-mootor renderdab kuju reaalajas.

  1. 1
    Liugurid kirjutavad olekut
    Iga vahemiku sisend kirjutab ühte kaheksast numbrilisest olekumuutujast — neli horisontaalset nurgaraadiust ja neli vertikaalset elliptilise režiimi jaoks. Ühtne režiim kokkub kõik kaheksa üheks liuguriks setAll abistaja kaudu, mis sünkroniseerib kõik väärtused korraga.
  2. 2
    useMemo koostab CSS väärtuse
    useMemo hook arvutab border-radius stringi uuesti, kui mis tahes nurgaväärtus, ühik (px või %) või elliptiline lüliti muutub. Standardrežiimis toodab see nelja-väärtuselise lühivormi; elliptilisega sees lisab see kaldkriipsu eraldaja kaheksa-väärtuselise täissüntaksi jaoks — nt 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Brauseri CSS-mootor renderdab eelvaate
    Arvutatud string seatakse reasisese borderRadius stiilina lihtsale div-elemendile. Brauseri paigutusmootor teeb kogu renderdamise — lõuendit, SVG-d ega kolmanda osapoole joonistuskoodi pole.
  4. 4
    Clipboard API kopeerib väljundi
    Kopeeri klõpsamine kutsub navigator.clipboard.writeText'i kas CSS-deklaratsiooniga (border-radius: ...;) või samaväärse Tailwindi suvaväärtuse klassiga (rounded-[...]), olenevalt valitud vormingu lülitist.

Seotud tööriistad

🎨

CSS-kastivarju generaator

Visuaalne CSS box-shadow ehitaja reaalajas eelvaatega, mitmekihilise virnastamise, värvivalija, sissesüvise lülitamise ja ühe klõpsuga kopeerimisega. Sisaldab Materiali, neumorfismi ja sädelevu eelseadistusi.

Proovi järele
🟦

CSS Ruudustiku generaator

Kujundage visuaalselt CSS ruudustikku — rajad, ühikud ja vahed — ja kopeerige loodud CSS ja HTML.

Proovi järele
↔️

CSS Flexboxi generaator

Eksperimendeerige painde suunda, mähkimist, õigustamist ja joondamist otseülekande üksustes — ja kopeerige CSS.

Proovi järele

Korduma kippuvad küsimused