Penjana border radius
Tetapkan setiap sudut dan salin CSS.
- Berjalan dalam pelayar anda — teks anda tidak pernah dihantar ke mana-mana
- Tanpa pendaftaran, tanpa kuota, percuma digunakan sebanyak mana yang anda suka
Cara ia berfungsi
border-radius mudah sehinggalah anda mahu tiga sudut bulat dan satu segi empat, ketika semua orang perlu mencari susunan empat nilai itu.
Susunannya, untuk selama-lamanya
Kiri atas, kanan atas, kanan bawah, kiri bawah — mengikut arah jam bermula dari kiri atas. Susunan mengikut arah jam dari kiri atas yang sama juga terpakai pada singkatan margin, padding dan border, yang berbaloi dihafal sekali.
Piksel atau peratus
Piksel memberikan lengkung yang sama tanpa mengira saiz elemen. Peratusan adalah relatif kepada lebar dan tinggi elemen itu sendiri, jadi lengkung berskala — dan jejari 50% pada segi empat sama memberikan bulatan sempurna, iaitu helah standard untuk avatar bulat.
Bentuk pil
Jejari yang lebih besar daripada separuh ketinggian elemen dihadkan kepada tepat separuh, itulah sebabnya border-radius: 999px menghasilkan pil dengan boleh dipercayai tanpa mengira ketinggian. Ia lebih mantap daripada mengira nilai yang betul, kerana ia terus berfungsi apabila kandungan berubah.
Apabila sudut kelihatan salah pada elemen bersarang
Kotak bulat di dalam kotak bulat lain memerlukan jejari yang lebih kecil pada yang dalam, dikurangkan dengan padding di antara keduanya, jika tidak lengkung tidak akan sepusat. Ia perincian kecil yang menjadikan kad kelihatan dibuat dengan baik.
Penjana border radius — soalan lazim
Apakah susunan empat nilai itu?
Kiri atas, kanan atas, kanan bawah, kiri bawah — mengikut arah jam dari kiri atas.
Bagaimana saya membuat bulatan sempurna?
border-radius: 50% pada elemen yang betul-betul segi empat sama.
Bagaimana saya membuat butang bentuk pil?
Gunakan nilai besar seperti 999px. Pelayar mengehadkannya kepada separuh ketinggian, jadi ia berfungsi pada sebarang saiz.
Patutkah saya menggunakan piksel atau peratus?
Piksel untuk lengkung yang konsisten; peratus apabila anda mahu ia berskala dengan elemen.
Adakah ia berfungsi di mana-mana?
Ya. border-radius telah disokong tanpa awalan selama lebih sedekad.