Fara beint í aðalefni
LibraTool logoLibraTool

CSS hornrenniasmiður — ókeypis

Hannaðu sjónlægt kringlótt horn með sjálfstæðri stýringu yfir hvert horn. Styður sporöskju X/Y-setningafræði fyrir lífrænnar blóbbsmynd.

Virkar án nettengingar eftir hleðslu
border-radius: 20px 20px 20px 20px;
Eining

Algeng notkun

  • Lífleg BlobbformNotaðu sporöskjulaga X/Y setninguna til að búa til einstaka blobform fyrir hetjuhluta og myndskreytingar.
  • Kort og ílýsingir í hornum gámaVenjulegar ílýsingir fyrir kort, gáma og spjöld í nútíma UI hönnun.
  • Avatar og prófílmyndirBúðu til rétta hornastíl fyrir prófílmyndir: hringlaga, kvaðratþrúðungur eða ílýstur ferningur.
  • Pillar, Merki og StimplarByggðu fullkomlega ílýsta pillar-hnappa, merki og stimpla með 9999 forstillingunni.
  • Ósamhverfar hornhönnunBlandaðu radíusa yfir horn til að búa til sérkennilega, vörumerkisþekkta kort og hnappastig.

Hvernig það virkar

Border-radius myndarinn keyrir alfarið í vafranum — enginn netþjónn, ekkert bókasafn og engin upphleðsla. Hann byggir CSS border-radius gildisstrenginn beint í JavaScript með React state og useMemo, beitir honum svo sem innlínustíl á lifandi div-element svo eigin CSS-vél vafrans myndgeri lögunina í rauntíma.

  1. 1
    Rennar skrifa ástand
    Sérhvert sviðsinntak skrifar í eina af átta talnaástandsbreytum — fjórum lárétt hornradíum og fjórum lóðréttum fyrir sporöskjuham. Sameinaður hamur fellir alla átta saman í eina rennu með setAll hjálparfalli sem samstillir hvert gildi í einu.
  2. 2
    useMemo rangar saman CSS-gildið
    useMemo hook reiknar border-radius strenginn upp á nýtt hvenær sem hornagildi, eining (px eða %), eða sporöskjuvíxil breytist. Í staðalham framleiðir hann fjögurra-gilda styttinguna; með sporöskju virkri bætir hann við skástriks-aðskiljara fyrir fulla átta-gilda setningafræði — t.d. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    CSS-vél vafrans myndgerir forskoðunina
    Reiknaði strengurinn er settur sem innlínu borderRadius stíll á venjulegu div-elementi. Uppsetningarvél vafrans gerir alla myndgerðina — enginn kanvas, ekkert SVG, og enginn þriðja-aðila teiknikóði.
  4. 4
    Clipboard API afritar úttakið
    Að smella á Afrita kallar á navigator.clipboard.writeText með annaðhvort CSS-yfirlýsingunni (border-radius: ...;) eða samsvarandi Tailwind handahófs-gildisflokki (rounded-[...]), eftir völdu formsvixli.

Tengd verkfæri

🎨

CSS kassaskuggasmiður

Sjónlægur smiður fyrir CSS box-shadow með beinni forskoðun, marglagsstafla, litatvelja, innsetninga-skiptur og eins-smella-afritun. Inniheldur Material, neumorphism og glóðuforstillingar.

Prófaðu það
🟦

CSS Grid framleiðandi

Hannstu CSS hnitakerfi með sjónrænum hætti — brautir, einingar og bila — og afritaðu mynduðu CSS og HTML.

Prófaðu það
↔️

CSS Flexbox framleiðandi

Tilrauna með flex stefnu, vefingu, réttlætingu og samhæfingu á lifandi hlutum — og afritaðu CSS.

Prófaðu það

Algengar spurningar