LibraTool logoLibraTool

ಉಚಿತ CSS ಬಾರ್ಡರ್ ರೇಡಿಯಸ್ ಜನರೇಟರ್

ಪ್ರತಿ ಮೂಲೆಯ ಮೇಲೆ ಸ್ವತಂತ್ರ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಸುತ್ತಿನ ಮೂಲೆಗಳನ್ನು ದೃಶ್ಯವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿ. ಸಾವಯವ ಆಕಾರಗಳಿಗಾಗಿ ಇಲಿಪ್ಟಿಕಲ್ X/Y ಸಿಂಟ್ಯಾಕ್ಸ್ ಬೆಂಬಲಿಸುತ್ತದೆ.

ಒಮ್ಮೆ ಲೋಡ್ ಆದ ನಂತರ ಆಫ್‌ಲೈನ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ
border-radius: 20px 20px 20px 20px;
ಘಟಕ

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಬಾರ್ಡರ್-ರೇಡಿಯಸ್ ಜನರೇಟರ್ ಸಂಪೂರ್ಣವಾಗಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ — ಯಾವುದೇ ಸರ್ವರ್ ಇಲ್ಲ, ಲೈಬ್ರರಿ ಇಲ್ಲ, ಅಪ್‌ಲೋಡ್ ಇಲ್ಲ. ಇದು React ಸ್ಥಿತಿ ಮತ್ತು useMemo ಬಳಸಿ JavaScript ನಲ್ಲಿ ನೇರವಾಗಿ CSS border-radius ಮೌಲ್ಯ ಸ್ಟ್ರಿಂಗ್ ನಿರ್ಮಿಸುತ್ತದೆ, ನಂತರ ಬ್ರೌಸರ್‌ನ ಸ್ವಂತ CSS ಇಂಜಿನ್ ಆಕಾರವನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ರೆಂಡರ್ ಮಾಡುವಂತೆ ಲೈವ್ div ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಇನ್‌ಲೈನ್ ಶೈಲಿಯಾಗಿ ಅನ್ವಯಿಸುತ್ತದೆ.

  1. 1
    ಸ್ಲೈಡರ್‌ಗಳು ಸ್ಥಿತಿಯನ್ನು ಬರೆಯುತ್ತವೆ
    ಪ್ರತಿ ರೇಂಜ್ ಇನ್‌ಪುಟ್ ಎಂಟು ಸಂಖ್ಯಾ ಸ್ಥಿತಿ ವೇರಿಯಬಲ್‌ಗಳಲ್ಲಿ ಒಂದಕ್ಕೆ ಬರೆಯುತ್ತದೆ — ಎಲಿಪ್ಟಿಕಲ್ ಮೋಡ್‌ಗಾಗಿ ನಾಲ್ಕು ಅಡ್ಡ ಮೂಲೆ ರೇಡಿಯಸ್ ಮತ್ತು ನಾಲ್ಕು ಲಂಬ. ಏಕೀಕೃತ ಮೋಡ್ ಎಲ್ಲಾ ಎಂಟನ್ನೂ setAll ಸಹಾಯಕ ಮೂಲಕ ಒಂದೇ ಬಾರಿಗೆ ಎಲ್ಲಾ ಮೌಲ್ಯಗಳನ್ನು ಸಿಂಕ್ರೊನೈಸ್ ಮಾಡುವ ಒಂದೇ ಸ್ಲೈಡರ್ ಆಗಿ ಸಂಕುಚಿಸುತ್ತದೆ.
  2. 2
    useMemo CSS ಮೌಲ್ಯವನ್ನು ಜೋಡಿಸುತ್ತದೆ
    ಯಾವುದೇ ಮೂಲೆ ಮೌಲ್ಯ, ಘಟಕ (px ಅಥವಾ %), ಅಥವಾ ಎಲಿಪ್ಟಿಕಲ್ ಟಾಗಲ್ ಬದಲಾದಾಗ useMemo ಹುಕ್ border-radius ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಮರುಲೆಕ್ಕಹಾಕುತ್ತದೆ. ಮಾನಕ ಮೋಡ್‌ನಲ್ಲಿ ಇದು ನಾಲ್ಕು-ಮೌಲ್ಯದ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಉತ್ಪಾದಿಸುತ್ತದೆ; ಎಲಿಪ್ಟಿಕಲ್ ಆನ್ ಆಗಿದ್ದರೆ, ಪೂರ್ಣ ಎಂಟು-ಮೌಲ್ಯ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಾಗಿ ಸ್ಲ್ಯಾಶ್ ವಿಭಜಕ ಸೇರಿಸುತ್ತದೆ — ಉದಾ. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    ಬ್ರೌಸರ್ CSS ಇಂಜಿನ್ ಮುನ್ನೋಟ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ
    ಲೆಕ್ಕಹಾಕಿದ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಸಾದಾ div ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಇನ್‌ಲೈನ್ borderRadius ಶೈಲಿಯಾಗಿ ಹೊಂದಿಸಲಾಗುತ್ತದೆ. ಬ್ರೌಸರ್‌ನ ಲೇಔಟ್ ಇಂಜಿನ್ ಎಲ್ಲಾ ರೆಂಡರಿಂಗ್ ಮಾಡುತ್ತದೆ — ಯಾವುದೇ ಕ್ಯಾನ್ವಾಸ್ ಇಲ್ಲ, SVG ಇಲ್ಲ, ಮತ್ತು ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಡ್ರಾಯಿಂಗ್ ಕೋಡ್ ಇಲ್ಲ.
  4. 4
    Clipboard API ಔಟ್‌ಪುಟ್ ನಕಲಿಸುತ್ತದೆ
    ನಕಲಿಸಿ ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಆಯ್ಕೆ ಮಾಡಿದ ಫಾರ್ಮ್ಯಾಟ್ ಟಾಗಲ್ ಅನ್ನು ಅವಲಂಬಿಸಿ CSS ಘೋಷಣೆ (border-radius: ...;) ಅಥವಾ ಸಮಾನ Tailwind ನಿರಂಕುಶ-ಮೌಲ್ಯ ವರ್ಗ (rounded-[...]) ಜೊತೆಗೆ navigator.clipboard.writeText ಕರೆಯಲಾಗುತ್ತದೆ.

ಸಂಬಂಧಿತ ಪರಿಕರಗಳು

🎨

CSS ಬಾಕ್ಸ್ ಶ್ಯಾಡೋ ಜನರೇಟರ್

ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆ, ಬಹು-ಲೇಯರ್ ಸ್ಟ್ಯಾಕಿಂಗ್, ಬಣ್ಣ ಆಯ್ಕೆಗಾರ, ಇನ್‌ಸೆಟ್ ಟಾಗಲ್, ಮತ್ತು ಒಂದೇ ಕ್ಲಿಕ್ ನಕಲಿನೊಂದಿಗೆ CSS box-shadow ಗಾಗಿ ದೃಶ್ಯ ಬಿಲ್ಡರ್. Material, ನ್ಯೂಮಾರ್ಫಿಸಂ, ಮತ್ತು ಗ್ಲೋ ಪ್ರಿಸೆಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ಇದನ್ನು ಪ್ರಯತ್ನಿಸಿ
🟦

CSS ಗ್ರಿಡ್ ಜನರೇಟರ್

CSS ಗ್ರಿಡ್ ಅನ್ನು ದೃಷ್ಯವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿ — ಟ್ರ್ಯಾಕ್‌ಗಳು, ಯುನಿಟ್‌ಗಳು ಮತ್ತು ಗ್ಯಾಪ್‌ಗಳು — ಮತ್ತು ಜನರೇಟ್ ಆದ CSS ಹಾಗೂ HTML ಅನ್ನು ಕಾಪಿ ಮಾಡಿ.

ಇದನ್ನು ಪ್ರಯತ್ನಿಸಿ
↔️

CSS ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಜನರೇಟರ್

ಲೈವ್ ಐಟಂಗಳ ಮೇಲೆ ಫ್ಲೆಕ್ಸ್ ಡೈರೆಕ್ಷನ್, ವ್ರ್ಯಾಪ್, ಜಸ್ಟಿಫೈ ಮತ್ತು ಅಲೈನ್ ಅನ್ನು ಪ್ರಯೋಗಿಸಿ — ಮತ್ತು CSS ಕಾಪಿ ಮಾಡಿ.

ಇದನ್ನು ಪ್ರಯತ್ನಿಸಿ

ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು