Kyauta Mai Ƙirƙirar CSS Border Radius

Yadda Yake Aiki

Mai ƙirƙirar border-radius yana gudana gaba ɗaya a burauza — babu uwar garke, babu ɗakin karatu, kuma babu lodawa. Yana gina harafin ƙimar CSS border-radius kai tsaye a JavaScript ta amfani da React state da useMemo, sannan yana amfani da shi a matsayin salo na cikin gida a kan wani div mai rai don injin CSS na burauzarka da kansa ya zana siffar cikin lokaci na gaskiya.

1. 1
   Masu zamewa suna rubuta yanayi

   Kowace shigarwar zango tana rubutawa zuwa daya daga cikin masu canji na yanayi guda takwas na lamba — radiyoyi na kusurwa hudu na kwance da hudu na tsaye don yanayin elliptical. Yanayin haɗe yana lulluɓe duka takwas zuwa mai zamewa guda ta hanyar wani mai taimako setAll wanda yake daidaita kowace ƙima a lokaci guda.
2. 2
   useMemo yana haɗa ƙimar CSS

   Wani useMemo hook yana sake lissafta harafin border-radius duk lokacin da kowace ƙimar kusurwa, naúra (px ko %), ko sauya elliptical ya canja. A yanayin al'ada yana samar da gajarce na ƙima hudu; da elliptical a kunne, yana ƙara rabewar slash don cikakken tsarin ƙima takwas — misali 32px 20px 20px 32px / 20px 32px 20px 32px.
3. 3
   Injin CSS na burauza yana zana dubawa

   Ana saita harafin da aka lissafta a matsayin salo na cikin gida borderRadius a kan wani div sauƙi. Injin tsari na burauza yana yin duk zanawa — babu canvas, babu SVG, kuma babu lambar zana ta wani bangare na uku.
4. 4
   Clipboard API tana kwafin fitarwa

   Dannawa Kwafi yana kiran navigator.clipboard.writeText da ko dai bayanin CSS (border-radius: ...;) ko iri ɗayan aji na Tailwind arbitrary-value (rounded-[...]), bisa ga zaɓaɓɓen sauya tsari.

Kayan Aiki Masu Alaƙa