Joan eduki nagusira
LibraTool logoLibraTool

CSS Borde Erradio Sortzailea doan

Diseinatu biribiltutako ertzak bisualki ertz bakoitzaren kontrol independentea erabiliz. Onartzen du X/Y sintaxi eliptikoa forma organikoak sortzeko.

Linez kanpo funtzionatzen du behin kargatuta
border-radius: 20px 20px 20px 20px;
Unitatea

Ohiko erabilerak

  • Blob Forma OrganikoakErabili X/Y sintaxi eliptikoa blob forma bakarriak sortuz heroi-sekzioak eta ilustrazioak.
  • Txartelak eta Edukiontzi AngeluakBenetakoak biltzeko borobila zabalak txartelak, edukiontzia eta panelak diseinu UI modernoan.
  • Avatar eta Profil ArgazkiakSortu profil-argazkientzat angeluaren estilo egokia: zirkularra, squircle edo borobil karratu.
  • Pilulak, Etiketak eta HarluskoakBatu pilula-botoiak ezin zuzentzean, etiketak eta harluskoak 9999 aurkezpenarekin.
  • Asimetriako Angeluen DesignakNahastzea erradioa angeluen gainean marka-berriztatzea txartela eta botoi formenak sortzeko.

Nola Funtzionatzen Du

border-radius sortzaileak erabat nabigatzailean funtzionatzen du β€” ez dago zerbitzaririk, liburutegirik, edo igoerarik. CSS border-radius balio-katea zuzenean JavaScripten eraikitzen du React estatua eta useMemo erabiliz, gero div elementu bizi baten estilo lerrokatu gisa aplikatzen du, nabigatzailearen CSS motorrak forma denbora errealean errenda dezan.

  1. 1
    Graduatzaileek egoera idazten dute
    Barruti-sarrera bakoitzak zortzi zenbakizko egoera-aldagaietako batean idazten du β€” lau esparru horizontal-erpin erradio eta lau bertikal modu eliptikorako. Modu bateratuak zortziak graduatzaile bakar batean kolapsatzen ditu setAll laguntzaile baten bidez, balio guztiak aldi berean sinkronizatzen dituena.
  2. 2
    useMemo-k CSS balioa muntatzen du
    useMemo hook batek border-radius katea berriro kalkulatzen du erpin-balio, unitate (px edo %), edo eliptiko-lerroa aldatzen denean. Modu estandarrean lau-balioko laburdura sortzen du; eliptikoa piztuta, zortzi-balioko sintaxi osorako barra bereizlea gehitzen du β€” adibidez 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Nabigatzailearen CSS motorrak aurrebista errendatzen du
    Kalkulatutako katea div elementu laukoko borderRadius estilo lerrokatu gisa ezartzen da. Nabigatzailearen diseinu-motorrak errendatze guztia egiten du β€” ez dago lauki-oihalik, SVGrik, edo hirugarrenen marrazte-koderik.
  4. 4
    Clipboard API-k irteera kopiatzen du
    Kopiatu klikatzeak navigator.clipboard.writeText deitzen du CSS adierazpenarekin (border-radius: ...;) edo Tailwind baliozko aukeraren klase baliokidearekin (rounded-[...]), hautatutako formatu-lerroaren araberakoa.

Erlazionatutako tresnak

🎨

CSS Kutxa Itzal Sortzailea

CSS box-shadow-rako eraikitzaile bisuala zuzeneko aurrebistarekin, geruza anitzeko pilaketa, kolore-hautatzailea, sartuta-alternantzia eta klik bakarreko kopia. Material, neuromorfismo eta distira aurre-zehaztapenak barne.

Probatu
🟦

CSS Sarearen Sortzeaila

Diseinatu ikustoki batean CSS sareak β€” pistak, unitateak eta tarteak β€” eta kopiatu sortutako CSS eta HTML.

Probatu
↔️

CSS Flexbox Sortzeaila

Esperimentatu flex norabidea, bilketa, justifikazioa eta lerroaketan zuzeneko elementuetan β€” eta kopiatu CSS.

Probatu

Maiz egiten diren galderak