Penjana Border Radius CSS
Penjana border-radius CSS visual. Laraskan setiap sudut secara bebas dengan pratonton masa nyata dan salin kod CSS serta-merta.
Apakah CSS border-radius?
CSS border-radius adalah sifat yang membundarkan sudut sempadan luar elemen. Anda boleh tetapkan setiap sudut secara bebas menggunakan satu hingga empat nilai.
Bagaimana membuat bulatan sempurna dengan border-radius?
Tetapkan border-radius kepada 50% pada elemen persegi (lebar dan tinggi sama). Untuk elips, gunakan border-radius: 50% pada elemen segi empat tepat.
Unit apa yang boleh saya gunakan untuk border-radius?
Border-radius menerima px, %, em, rem, vw, vh dan unit panjang CSS lain. Peratusan adalah relatif kepada dimensi elemen.
Apakah sintaks ringkas untuk border-radius?
Singkatan mengikut corak: kiri-atas kanan-atas kanan-bawah kiri-bawah. Satu nilai terpakai untuk semua sudut. Dua nilai menetapkan kiri-atas/kanan-bawah dan kanan-atas/kiri-bawah.
Bolehkah saya membuat sudut elips?
Ya, menggunakan sintaks garis miring (/) anda boleh tentukan radius mendatar dan menegak berasingan. Contohnya border-radius: 50% / 100px.
Adakah border-radius berfungsi pada semua elemen?
Border-radius berfungsi pada kebanyakan elemen HTML termasuk div, button, img dan input. Tetapi mungkin tidak klip kandungan overflow tanpa overflow: hidden.
Bolehkah saya membuat bentuk kompleks dengan border-radius?
Ya, dengan menggabungkan nilai radius berbeza untuk setiap sudut, anda boleh membuat pil, bujur, daun dan bentuk organik tersuai.
Adakah border-radius disokong dalam semua pelayar?
Ya, border-radius disokong dalam semua pelayar moden termasuk Chrome, Firefox, Safari, Edge dan pelayar mudah alih.
Bagaimana membuat butang berbentuk pil?
Tetapkan border-radius kepada nilai sama atau lebih besar daripada separuh ketinggian elemen. Untuk butang 40px tinggi, gunakan border-radius: 20px atau lebih tinggi.
Adakah border-radius mempengaruhi imej latar belakang?
Ya, border-radius memotong latar belakang, imej latar belakang dan sempadan elemen. Latar belakang secara automatik mengikut sudut bulat.
Bolehkah saya animasikan border-radius?
Ya, border-radius boleh dianimasikan dengan peralihan dan animasi CSS. Anda boleh beralih lancar antara nilai radius berbeza.
Bolehkah saya gunakan border-radius dengan transform CSS?
Ya, border-radius berfungsi baik dengan transformasi CSS seperti rotate, scale dan translate.
Bagaimana membuat bulatan dengan sempadan?
Gunakan border-radius: 50% pada elemen persegi dengan lebar dan tinggi sama, kemudian tambah sifat border.
Apakah perbezaan antara sifat sudut individu dan singkatan?
Sifat individu seperti border-top-left-radius memberi anda kawalan tepat setiap sudut. Singkatan membolehkan anda tetapkan beberapa sudut dalam satu pengisytiharan.