Neidio i'r prif gynnwys
LibraTool logoLibraTool

Generadur Radiws Ymyl CSS am ddim

Dyluniwch gorneli crwn yn weledol gyda rheolaeth annibynnol dros bob cornel. Yn cefnogi'r syntax X/Y elliptig ar gyfer siapiau blob organig.

Yn gweithio all-lein ar ôl llwytho
border-radius: 20px 20px 20px 20px;
Uned

Defnyddiau cyffredin

  • Siapiau Blob OrganigDefnyddiwch y synwyriad elliptig X/Y i greu siapiau blob unigryw ar gyfer adrannau arwr ac anodau.
  • Corneli Carden a ChynhwyseddCorneli cryno safonol ar gyfer cardiau, cynhwysyddion a phanel mewn dyluniad UI modern.
  • Afatar a Lluniau ProffilCrewch yr arddull cornel iawn ar gyfer lluniau proffil: crwn, squircle, neu sgwâr croniedig.
  • Pils, Tagiau a BathauAdeiladwch fotymau pil yn berffaith croniedig, tagiau a bathau gyda'r osodiad 9999.
  • Dyluniadau Cornel AnghymesurCymysgwch radiws ar draws corneli i greu siapiau carden a botymau penodol, adnabyddadwy yn ôl brand.

Sut Mae'n Gweithio

Mae'r generadur border-radius yn rhedeg yn gyfan gwbl yn y porwr — nid oes gweinydd, llyfrgell, na llwytho. Mae'n adeiladu llinyn gwerth CSS border-radius yn uniongyrchol yn JavaScript gan ddefnyddio cyflwr React a useMemo, yna'n ei gymhwyso fel arddull mewn-lein ar elfen div fyw fel bod injan CSS y porwr ei hun yn rendro'r siâp mewn amser real.

  1. 1
    Mae llithryddion yn ysgrifennu cyflwr
    Mae pob mewnbwn amrediad yn ysgrifennu i un o wyth newidyn cyflwr rhifiadol — pedwar radiws cornel llorweddol a phedwar fertigol ar gyfer modd eliptigol. Mae modd unedig yn cywasgu pob un o'r wyth i lithrydd sengl drwy gynorthwyydd setAll sy'n cydamseru pob gwerth ar unwaith.
  2. 2
    Mae useMemo yn cydosod y gwerth CSS
    Mae bachyn useMemo yn ailgyfrifo'r llinyn border-radius pryd bynnag y bydd unrhyw werth cornel, uned (px neu %), neu dogl eliptigol yn newid. Mewn modd safonol mae'n cynhyrchu'r byrfoddiad pedwar-gwerth; gyda eliptigol ymlaen, mae'n ychwanegu'r gwahanydd slaes ar gyfer y gystrawen wyth-gwerth lawn — e.e. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Mae injan CSS y porwr yn rendro'r rhagolwg
    Mae'r llinyn a gyfrifwyd yn cael ei osod fel arddull borderRadius mewn-lein ar elfen div plaen. Mae injan cynllun y porwr yn gwneud yr holl rendro — nid oes cynfas, SVG, na chod tynnu trydydd parti.
  4. 4
    Mae'r Clipboard API'n copïo'r allbwn
    Mae clicio Copïo'n galw navigator.clipboard.writeText naill ai gyda'r ddatganiad CSS (border-radius: ...;) neu'r dosbarth gwerth-mympwyol Tailwind cyfatebol (rounded-[...]), yn dibynnu ar y dogl fformat a ddewiswyd.

Offer Cysylltiedig

🎨

Generadur Cysgod Blwch CSS

Adeiladwr gweledol ar gyfer box-shadow CSS gyda rhagolwg byw, haenu aml-haen, dewiswyr lliw, toglo mewnol, a chopïo un-clic. Yn cynnwys rhagosodiadau Material, neumorffiaeth, a glow.

Rhowch gynnig arni
🟦

Generadur CSS Grid

Dylunio CSS grid yn ddeiliadol — traciau, unedau a bylchau — ac copïo'r CSS a HTML a gynhyrchwyd.

Rhowch gynnig arni
↔️

Generadur CSS Flexbox

Arbrofi gyda chyfeiriad flex, lapio, cyfiawnhau ac alinio ar eitemau byw — ac copïo'r CSS.

Rhowch gynnig arni

Cwestiynau Cyffredin