Penjana Jejari Sempadan CSS percuma
Reka bentuk sudut membulat secara visual dengan kawalan bebas ke atas setiap sudut. Menyokong sintaks elips X/Y untuk bentuk blob organik.
border-radius: 20px 20px 20px 20px;
Kegunaan biasa
- Bentuk Blob OrganikGunakan sintaks elips X/Y untuk membuat bentuk blob unik untuk bagian pahlawan dan ilustrasi.
- Sudut Kartu dan KontainerSudut bulat standar untuk kartu, kontainer, dan panel dalam desain UI modern.
- Avatar dan Bentuk Foto ProfilBuat gaya sudut yang tepat untuk foto profil: lingkaran, squircle, atau persegi membulat.
- Pil, Tag, dan LencanaBuat tombol pil bulat sempurna, tag, dan lencana dengan preset 9999.
- Desain Sudut AsimetrisCampur jari-jari di sudut untuk membuat bentuk kartu dan tombol yang khas dan dapat dikenali merek.
Cara ia berfungsi
Penjana border-radius berjalan sepenuhnya dalam pelayar β tiada pelayan, tiada pustaka, dan tiada muat naik. Ia membina rentetan nilai CSS border-radius terus dalam JavaScript menggunakan state React dan useMemo, kemudian mengenakannya sebagai gaya sebaris pada elemen div langsung supaya enjin CSS pelayar sendiri memaparkan bentuk secara masa nyata.
- 1Penggelangsar menulis stateSetiap input julat menulis kepada satu daripada lapan pembolehubah state berangka β empat jejari sudut mendatar dan empat menegak untuk mod bujur. Mod bersatu meruntuhkan kesemua lapan kepada satu penggelangsar melalui pembantu setAll yang menyegerakkan setiap nilai sekaligus.
- 2useMemo membina nilai CSSHook useMemo mengira semula rentetan border-radius apabila mana-mana nilai sudut, unit (px atau %), atau togol bujur berubah. Dalam mod standard ia menghasilkan singkatan empat-nilai; dengan bujur dihidupkan, ia menambah pemisah garis miring untuk sintaks lapan-nilai penuh β cth. 32px 20px 20px 32px / 20px 32px 20px 32px.
- 3Enjin CSS pelayar memaparkan pratontonRentetan terkira ditetapkan sebagai gaya borderRadius sebaris pada elemen div biasa. Enjin susun atur pelayar melakukan semua pemaparan β tiada kanvas, tiada SVG, dan tiada kod lukisan pihak ketiga.
- 4Clipboard API menyalin outputMengklik Salin memanggil navigator.clipboard.writeText dengan sama ada pengisytiharan CSS (border-radius: ...;) atau kelas nilai-sembarang Tailwind yang setara (rounded-[...]), bergantung pada togol format yang dipilih.
Alat berkaitan
Penjana Bayang Kotak CSS
Pembina visual untuk box-shadow CSS dengan pratonton langsung, penindanan berbilang lapisan, pemilih warna, togol inset, dan salin satu klik. Termasuk pratetap Material, neumorfisme, dan cahaya.
Penjana Petak CSS
Reka bentuk petak CSS secara visual β trek, unit dan jurang β dan salin CSS dan HTML yang dijana.
Penjana Flexbox CSS
Eksperimen dengan arah flex, bungkus, justifikasi dan selaras pada item langsung β dan salin CSS.