ነፃ CSS Border Radius ፈጣሪ

እንዴት እንደሚሠራ

border-radius generator ሙሉ በሙሉ በአሳሽ ውስጥ ይሰራል — ምንም አገልጋይ የለም፣ ምንም ላይብረሪ የለም፣ እና ምንም ስቀላ የለም። React state እና useMemo በመጠቀም CSS border-radius value stringን በቀጥታ በJavaScript ይገነባል፣ ከዚያ የአሳሹ የራሱ CSS engine ቅርጹን በእውነተኛ ጊዜ እንዲያሳይ በቀጥታ div element ላይ እንደ inline style ይተገብረዋል።

1. 1
   ተንሸራታቾች state ይጽፋሉ

   እያንዳንዱ range input ከስምንት ቁጥራዊ state ተለዋዋጮች አንዱን ይጽፋል — አራት አግድም ጥግ radii እና አራት ቁልቁል ለelliptical ሁነታ። ወጥ ሁነታ ሁሉንም ስምንት ወደ ነጠላ ተንሸራታች በsetAll helper ያሳንሳል ሁሉንም ዋጋ በአንድ ጊዜ ያመሳስላል።
2. 2
   useMemo CSS ዋጋውን ይገነባል

   useMemo hook ማንኛውም ጥግ ዋጋ፣ ክፍል (px ወይም %)፣ ወይም elliptical toggle ሲቀየር border-radius stringን እንደገና ያሰላል። በመደበኛ ሁነታ ውስጥ ባለ-አራት-ዋጋ ምህጻረ ቃል ያመርታል፤ elliptical ከበራ፣ ለሙሉ ባለ-ስምንት-ዋጋ syntax slash separatorን ይጨምራል — ለምሳሌ 32px 20px 20px 32px / 20px 32px 20px 32px።
3. 3
   የአሳሽ CSS engine ቅድመ-እይታውን ያሳያል

   የተሰላው string እንደ inline borderRadius style በተራ div element ላይ ይቀመጣል። የአሳሹ layout engine ሁሉንም ማሳያ ያከናውናል — ምንም canvas የለም፣ ምንም SVG የለም፣ እና ምንም የሶስተኛ ወገን drawing ኮድ የለም።
4. 4
   Clipboard API ውጤቱን ይቅዳል

   ቅዳን ጠቅ ማድረግ navigator.clipboard.writeTextን ይጠራል ወይ CSS declaration (border-radius: ...;) ወይም ተመጣጣኝ Tailwind arbitrary-value class (rounded-[...])፣ በተመረጠው ቅርጸት toggle ላይ ተመስርቶ።

ተዛማጅ መሳሪያዎች