Pāriet uz galveno saturu
LibraTool logoLibraTool

CSS apaļo stūru ģenerētājs bez maksas

Vizuāli noformē noapaļotus stūrus ar neatkarīgu kontroli pār katru stūri. Atbalsta eliptisko X/Y sintaksi organiskām blob formām.

Darbojas bezsaistē pēc ielādes
border-radius: 20px 20px 20px 20px;
Mērvienība

Biežākie lietojumi

  • Organiskās Blob FormasIzmantojiet eliptisko X/Y sintaksi, lai izveidotu unikālas blob formas hero sadaļām un ilustrāciļām.
  • Kartes un Konteinera StūriStandarta noapaļoti stūri kartēm, konteineriem un paneļiem modernajā UI dizainā.
  • Avatars & Profila Bildes FormasIzveidojiet pareizo stūra stilu profila bildēm: apļveida, squircle vai noapaļots kvadrāts.
  • Tabletes, Etiķetes un NozīmesVeidojiet lieliski noapaļotus tabletes pogus, etiķetes un nozīmes ar 9999 iestatījumu.
  • Asimetriskais Stūra DizainsSajauciet rādiusus stūros, lai izveidotu atšķirīgas, preču zīmes atpazīstamas kartes un pogu formas.

Kā tas darbojas

Malu noapaļojuma ģenerators darbojas pilnībā pārlūkprogrammā — nav servera, nav bibliotēkas, nav augšupielādes. Tas veido CSS border-radius vērtības virkni tieši JavaScript, izmantojot React stāvokli un useMemo, tad pielieto to kā iekļauto stilu dzīvam div elementam, lai pārlūkprogrammas pašas CSS dzinējs renderētu formu reālajā laikā.

  1. 1
    Slīdņi raksta stāvokli
    Katra diapazona ievade raksta vienā no astoņiem skaitliskiem stāvokļa mainīgajiem — četriem horizontālajiem stūru rādiusiem un četriem vertikālajiem eliptiskajam režīmam. Vienotais režīms sabalso visus astoņus vienā slīdnī, izmantojot setAll palīgu, kas sinhronizē visas vērtības vienlaicīgi.
  2. 2
    useMemo saliek CSS vērtību
    useMemo āķis pārrēķina border-radius virkni ikreiz, kad mainās jebkura stūra vērtība, mērvienība (px vai %) vai eliptiskā slēdža stāvoklis. Standarta režīmā tas rada četru vērtību saīsinājumu; ar ieslēgtu eliptisko tas pievieno slīpsvītras atdalītāju pilnajai astoņu vērtību sintaksei — piemēram, 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Pārlūkprogrammas CSS dzinējs renderē priekšskatījumu
    Aprēķinātā virkne tiek iestatīta kā iekļautais borderRadius stils vienkāršam div elementam. Pārlūkprogrammas izkārtojuma dzinējs veic visu renderēšanu — nav audekla, nav SVG, nav trešās puses zīmēšanas koda.
  4. 4
    Starpliktuves API kopē izvadi
    Noklikšķinot uz Kopēt, tiek izsaukts navigator.clipboard.writeText ar vai nu CSS deklarāciju (border-radius: ...;), vai ekvivalentu Tailwind patvaļīgas vērtības klasi (rounded-[...]), atkarībā no izvēlētā formāta slēdža.

Saistītie rīki

🎨

CSS lodziņa ēnas ģenerētājs

Vizuālais CSS box-shadow veidotājs ar tiešraides priekšskatījumu, vairāku slāņu kārtošanu, krāsu izvēlētāju, ielikuma pārslēgšanu un vienas pogas kopēšanu. Ietver Material, neiromorfisma un mirdzuma iepriekšiestatījumus.

Izmēģināt
🟦

CSS režģa ģenerators

Vizuāli noformējiet CSS režģi — sliedes, vienības un spraugas — un kopējiet ģenerēto CSS un HTML.

Izmēģināt
↔️

CSS Flexbox ģenerators

Eksperimentējiet ar flex virzienu, apvītošanu, justify un align uz tiešajiem elementiem — un kopējiet CSS.

Izmēģināt

Bieži uzdotie jautājumi