CodeKitHubApakah alat ini?
border-radius ialah sifat CSS yang membulatkan sudut sesuatu elemen. Ditulis secara manual ia mengambil empat nilai dalam susunan tetap — atas-kiri, atas-kanan, bawah-kanan, bawah-kiri — yang mudah tersalah susun, terutamanya apabila keempat-empat sudut berbeza.
Alat ini menghapuskan tekaan: gerakkan slaid, lihat sudut membulat dalam pratonton langsung, dan baca CSS yang tepat daripada kotak kod yang dijana. Satu togol kunci bertukar antara jejari seragam (keempat-empat sudut sama, kes paling biasa) dan empat slaid bebas untuk bentuk organik dan tidak seimbang.
Kenapa guna alat ini?
- Pratonton langsung dikemas kini serta-merta semasa anda menyeret — tiada perlu menyunting CSS dan menyegar untuk melihat hasil.
- Kunci satu klik untuk kes biasa 'jejari sama pada setiap sudut'; buka kunci untuk butang pil, buih pertuturan dan bentuk gumpalan.
- Menghasilkan bentuk nilai tunggal ringkas apabila semua sudut sepadan, atau bentuk empat nilai penuh apabila tidak — sedia salin-tampal sama ada satu.
- Berjalan sepenuhnya dalam pelayar anda. Tiada apa yang anda masukkan dihantar ke mana-mana.
- Percuma, tiada pendaftaran, berfungsi di mudah alih.
Cara menggunakannya
- Biarkan 'lock all corners' ditanda dan seret mana-mana slaid untuk menetapkan satu jejari seragam untuk keseluruhan kotak.
- Nyahtanda kunci untuk mengawal setiap sudut secara bebas — berguna untuk bentuk pil, titisan air dan kad tidak seimbang.
- Perhatikan kotak pratonton dikemas kini secara langsung semasa anda melaraskan setiap slaid.
- Salin CSS yang dijana daripada kotak kod dan tampal ke dalam helaian gaya anda.
Contoh
Input
Atas-kiri: 40px, Atas-kanan: 8px, Bawah-kanan: 40px, Bawah-kiri: 8pxHasil
border-radius: 40px 8px 40px 8px;Sudut bertentangan yang tidak sepadan seperti ini mencipta siluet daun atau kelopak — kesan biasa dalam reka bentuk kad dan lencana.
px atau % — unit mana yang perlu saya guna?
Penjana ini menghasilkan nilai piksel, yang merupakan lalai yang betul untuk kebanyakan kerja UI: butang, kad dan input di mana anda mahukan jejari sudut tetap dan boleh diramal tanpa mengira saiz elemen.
Peratusan berkelakuan berbeza — ia relatif kepada lebar dan tinggi elemen itu sendiri, jadi jejari 50% pada elemen segi empat sama menghasilkan bulatan sempurna, dan pada elemen bukan segi empat sama menghasilkan elips. Jika anda mahukan kesan itu (avatar, bentuk gumpalan yang berskala dengan bekasnya), ambil CSS yang dijana dan tukar nilai px kepada nilai % secara manual — contohnya border-radius: 50% menukar mana-mana kotak segi empat sama kepada bulatan.
Corak border-radius biasa
- Kad membulat: semua sudut sama, lebih kurang 8–16px untuk komponen UI.
- Butang pil: tetapkan jejari kepada separuh tinggi elemen (atau gunakan sahaja 9999px, yang menjepit kepada pil penuh tanpa mengira tinggi).
- Avatar bulatan: border-radius: 50% pada elemen segi empat sama (lebar dan tinggi sama).
- Buih pertuturan: tiga sudut membulat, satu sudut tajam — tetapkan tiga slaid tinggi dan satu kepada 0.
- Bentuk daun / kelopak: sudut bertentangan sepadan, sudut bersebelahan berbeza — contohnya atas-kiri dan bawah-kanan kedua-duanya besar, atas-kanan dan bawah-kiri kedua-duanya kecil.
Berpadanan dengan bayang
Sudut membulat jarang muncul bersendirian — kad dan butang biasanya memerlukan sedikit bayang untuk kedalaman juga. Gunakan Box Shadow Generator untuk mengatur bayang titisan dan gunakan kedua-dua bahagian CSS yang dijana pada elemen yang sama.
Soalan lazim
Apakah perbezaan antara border-radius dan susunan sudut?
Bentuk ringkas CSS sentiasa mengikut atas-kiri, atas-kanan, bawah-kanan, bawah-kiri mengikut susunan itu, ikut jam bermula dari atas-kiri. Empat slaid alat ini dilabel untuk sepadan, jadi anda tidak perlu menghafal susunan itu sendiri.
Bolehkah saya guna unit berbeza untuk setiap sudut?
Ya, dalam CSS sebenar anda boleh mencampur px, %, em dan rem merentasi sudut, walaupun jarang dalam praktik. Alat ini menghasilkan nilai px seragam untuk kemudahan — tukar mana-mana nilai individu kepada % atau unit lain terus dalam helaian gaya anda jika anda memerlukan unit campuran.
Kenapa border-radius: 50% kadangkala membuat bujur dan bukan bulatan?
Kerana peratusan relatif kepada setiap paksi secara berasingan — jejari mendatar ialah peratusan lebar elemen, jejari menegak peratusan tingginya. Pada elemen segi empat sama (lebar dan tinggi sama) itu menghasilkan bulatan sempurna; pada segi empat tepat ia menghasilkan elips.
Adakah border-radius berfungsi pada imej latar belakang dan sempadan juga?
Ya — border-radius memotong latar belakang, sempadan, dan (dalam pelayar moden) box-shadow elemen kepada bentuk membulat tersebut. Ia tidak memotong kandungan anak yang melimpah kecuali anda juga menetapkan overflow: hidden pada elemen induk.
Adakah had berapa besar jejari boleh menjadi?
Tiada had ketat — jika jejari melebihi separuh lebar atau tinggi elemen, pelayar menjepitnya supaya kedua-dua lengkung pada sisi itu bertemu tepat di tengah, itulah cara segi empat sama menjadi bulatan sempurna atau bentuk pil.
Bagaimana saya membuat bentuk pil atau bulatan sempurna?
Untuk bentuk pil (kapsul), tetapkan jejari kepada sekurang-kurangnya separuh tinggi elemen — helah biasa ialah border-radius: 9999px, yang berfungsi pada mana-mana tinggi kerana pelayar menghadkan lengkung secara automatik. Bulatan sempurna memerlukan dua perkara: lebar dan tinggi sama, ditambah border-radius: 50%.