Pulsuz CSS Haşiyə Radiusu Generatoru
Hər küncün müstəqil nəzarəti ilə yuvarlaq künclər vizual olaraq dizayn edin. Üzvi blob formaları üçün elliptik X/Y sintaksisini dəstəkləyir.
border-radius: 20px 20px 20px 20px;
Ümumi istifadələr
- Organik Blob FormalarıQəhrəman bölmələri və illüstratsiyalar üçün unikal blob formaları yaratmaq üçün eliptik X/Y sintaksisindən istifadə edin.
- Kartlar və Konteyner KünclərMüasir UI dizaynda kartlar, konteynerlar və panellər üçün standart yuvarlaq künclər.
- Avatar və Profil ŞəkilləriProfil şəkilləri üçün doğru künc stilini yaradın: dairəvi, squircle və ya yuvarlaq kvadrat.
- Həblər, Teqlər və Nişanlar9999 həzırlanmış ilə mükəmməl yuvarlaq həb düymələri, teqlər və nişanlar qurun.
- Asimmetrik Künc DizaynlarıFərqli, mərkəz tanınabilir kartları və düymə formaları yaratmaq üçün künclər arasında radiusları qarışdırın.
Necə İşləyir
Sərhəd-radiusu yaradıcısı tamamilə brauzerdə işləyir — server yoxdur, kitabxana yoxdur, yükləmə yoxdur. O, React state və useMemo istifadə edərək birbaşa JavaScript-də CSS border-radius dəyər sətrini qurur, sonra onu canlı bir div elementinə inline stil olaraq tətbiq edir ki, brauzerin öz CSS mühərriki formanı real vaxtda render etsin.
- 1Sürüşdürücülər state yazırHər aralıq girişi səkkiz rəqəmsal state dəyişənindən birinə yazır — dörd üfüqi künc radiusu və elliptik rejim üçün dörd şaquli. Vahid rejim bütün səkkizini bir dəfəyə hər dəyəri sinxronlaşdıran bir setAll köməkçisi vasitəsilə tək bir sürüşdürücüyə yığır.
- 2useMemo CSS dəyərini yığırBir useMemo hooku hər hansı künc dəyəri, vahid (px və ya %) və ya elliptik keçid dəyişəndə border-radius sətrini yenidən hesablayır. Standart rejimdə dörd-dəyərli qısaldılmış formanı yaradır; elliptik aktiv olduqda, tam səkkiz-dəyərli sintaksis üçün kəsr işarəsi əlavə edir — məsələn 32px 20px 20px 32px / 20px 32px 20px 32px.
- 3Brauzer CSS mühərriki önizləməni render edirHesablanmış sətir sadə bir div elementinə inline borderRadius stili kimi təyin edilir. Bütün render brauzerin layout mühərriki tərəfindən edilir — canvas yoxdur, SVG yoxdur, üçüncü tərəf çəkmə kodu yoxdur.
- 4Clipboard API çıxışı kopyalayırKopyala düyməsinə klikləmək seçilmiş format keçidinə görə navigator.clipboard.writeText-i CSS bəyanatı (border-radius: ...;) ya da ekvivalent Tailwind özbaşına-dəyər sinfi (rounded-[...]) ilə çağırır.
Əlaqəli Alətlər
CSS Qutu Kölgə Generatoru
Canlı önizləmə, çox qatlı yığım, rəng seçici, daxili keçiş və bir klikdə kopyalama ilə CSS qutu kölgəsi üçün vizual qurucusu. Material, neymorfizm və parlaqlıq əvvəlcədən hazırlanmış parametrləri daxildir.
CSS Grid Generatoru
CSS grid-i vizual olaraq dizayn edin — trekler, vahidlər və boşluqlar — və yaradılmış CSS və HTML-i kopyalayın.
CSS Flexbox Generatoru
Flex istiqaməti, qapanma, haqlı və düzəltmə ilə canlı elementlər üzərində eksperiment edin — və CSS-i kopyalayın.