இலவச CSS Border Radius உருவாக்கி

இது எவ்வாறு செயல்படுகிறது

border-radius generator முழுவதும் உலாவியில் இயங்குகிறது — சர்வர் இல்லை, நூலகம் இல்லை, பதிவேற்றம் இல்லை. React state மற்றும் useMemo மூலம் JavaScript இல் நேரடியாக CSS border-radius மதிப்பு string ஐ உருவாக்கி, நேரலை div உறுப்பில் inline style ஆகப் பயன்படுத்துகிறது; உலாவியின் சொந்த CSS இயந்திரம் வடிவத்தை நேரலையாக வரைகிறது.

1. 1
   ஸ்லைடர்கள் state இல் எழுதுகின்றன

   ஒவ்வொரு range input உம் எட்டு எண் state மாறிகளில் ஒன்றில் எழுதுகிறது — elliptical பயன்முறைக்கு நான்கு கிடைமட்ட மூலை ஆரங்கள், நான்கு செங்குத்து ஆரங்கள். Unified பயன்முறை setAll helper மூலம் எட்டையும் ஒற்றை ஸ்லைடராகச் சுருக்கி அனைத்து மதிப்புகளையும் ஒரே நேரத்தில் ஒத்திசைக்கிறது.
2. 2
   useMemo CSS மதிப்பை உருவாக்குகிறது

   ஏதேனும் மூலை மதிப்பு, அலகு (px அல்லது %), அல்லது elliptical toggle மாறும்போது useMemo hook border-radius string ஐ மீண்டும் கணக்கிடுகிறது. நிலையான பயன்முறையில் நான்கு-மதிப்பு shorthand ஐத் தருகிறது; elliptical இயக்கத்தில், முழு எட்டு-மதிப்பு syntax க்கு slash பிரிப்பானைச் சேர்க்கிறது — எ.கா. 32px 20px 20px 32px / 20px 32px 20px 32px.
3. 3
   உலாவியின் CSS இயந்திரம் முன்னோட்டத்தை வரைகிறது

   கணக்கிடப்பட்ட string ஒரு எளிய div உறுப்பில் inline borderRadius style ஆக அமைக்கப்படுகிறது. உலாவியின் layout இயந்திரமே அனைத்தையும் வரைகிறது — canvas இல்லை, SVG இல்லை, மூன்றாம் தரப்பு வரைதல் குறியீடு இல்லை.
4. 4
   Clipboard API வெளியீட்டை நகலெடுக்கிறது

   நகலெடு என்பதைக் கிளிக் செய்தால், தேர்ந்தெடுத்த வடிவ toggle ஐப் பொறுத்து CSS declaration (border-radius: ...;) அல்லது அதற்குச் சமமான Tailwind arbitrary-value class (rounded-[...]) உடன் navigator.clipboard.writeText அழைக்கப்படுகிறது.

தொடர்புடைய கருவிகள்