Léim go dtí an príomhábhar
LibraTool logoLibraTool

Gineadóir Ga Teorann CSS saor in aisce

Dearaigh coirnéil cruinnithe go hamhairc le rialú neamhspleách ar gach coirnéal. Tacaíonn le comhréir X/Y eilipseach le haghaidh cruthanna blob orgánacha.

Oibríonn as líne nuair a lódáiltear é
border-radius: 20px 20px 20px 20px;
Aonad

Úsáidí coitianta

  • Cruthanna Blob OrgánachÚsáid an chomhréir éilipseach X/Y chun cruthanna blob uathúla a chruthú do rannáin ghaisc agus léaráidí.
  • Coirnéil Chárta agus CoimeádáinCoirnéil bhunúsacha foluain do chártaí, coimeádáin agus painéil i ndearadh UI nua-aimseartha.
  • Avatar agus Pictiúir PhróifílCruthaigh an stíl coirnéil ceart do phictiúir phróifíl: cruinn, squircle, nó cearnóg foluain.
  • Píolúir, Tags agus BagáistíTóg cnaipe píolúra foluain foirfe, tags agus bagáistí leis an réamhshocrú 9999.
  • Deartha Coirnéil NeamhshiméadrachaMeascraigh gá ar fud na gcoirnéal chun cruthanna cárta agus cnaipí ar leith, inchruthaithe ar dheis a chruthú.

Conas a Oibríonn sé

Ritheann an gineadóir border-radius go hiomlán sa bhrabhsálaí — níl aon fhreastalaí, aon leabharlann, ná aon uaslódáil ann. Tógann sé an teaghrán luacha CSS border-radius go díreach i JavaScript ag baint úsáide as staid React agus useMemo, ansin cuireann sé i bhfeidhm é mar stíl inlíne ar eilimint div beo ionas go rindreálann inneall CSS an bhrabhsálaí féin an cruth i bhfíor-am.

  1. 1
    Scríobhann sleamhnáin staid
    Scríobhann gach ionchur raoin chuig ceann de ocht n-athróg staide uimhriúla — ceithre gha coirnéil chothrománacha agus ceithre cinn ingearacha don mhód éilipseach. Laghdaíonn an mód aontaithe an t-ocht go léir go sleamhnán amháin trí chúntóir setAll a shioncronaíonn gach luach ag an am céanna.
  2. 2
    Cuireann useMemo an luach CSS le chéile
    Athríomhann crúca useMemo an teaghrán border-radius aon uair a athraíonn aon luach coirnéil, aonad (px nó %), nó athraí éilipseach. I mód caighdeánach táirgeann sé an giorrúchán ceithre-luach; le héilipseach air, cuireann sé an deighilteoir slaise leis don chomhréir ocht-luach iomlán — m.sh. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Rindreálann inneall CSS an bhrabhsálaí an réamhamharc
    Socraítear an teaghrán ríofa mar stíl borderRadius inlíne ar eilimint div shimplí. Déanann inneall leagan amach an bhrabhsálaí an rindreáil go léir — níl aon chanbhás, aon SVG, ná aon chód tarraingthe tríú páirtí ann.
  4. 4
    Cóipeálann an API Gearrthaisce an t-aschur
    Glaonn cliceáil ar Chóipeáil ar navigator.clipboard.writeText leis an dearbhú CSS (border-radius: ...;) nó an aicme luacha treallach Tailwind coibhéiseach (rounded-[...]), ag brath ar an athraí formáide roghnaithe.

Uirlisí Gaolmhara

🎨

Gineadóir Scáth Bosca CSS

Tógálaí amhairc le haghaidh box-shadow CSS le réamhamharc beo, cruachú il-shraitheanna, roghnaí datha, scoránú inmheánach, agus cóipeáil le haon chliceáil. Cuimsíonn réamhshocruithe Ábhair, neomuirfóis, agus lonraithe.

Bain triail as
🟦

Giniúradh Ghréine CSS

Dearadh CSS gréine go radharcach — rianta, aonaid agus bhearna — agus cóipeáil an CSS agus HTML a ghintear.

Bain triail as
↔️

Giniúradh Flexbox CSS

Déan tástála ar threo flex, foluain, comhordú agus ailínithe ar mhíreanna beo — agus cóipeáil an CSS.

Bain triail as

Ceisteanna Coitianta