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.
Cara Menggunakan Penjana Border Radius CSS
Reka bentuk sudut membulat secara visual dengan penjana CSS border-radius ini. Semuanya berjalan setempat dalam pelayar anda dan tiada data dimuat naik.
- Pilih px, %, em atau rem dalam menu juntai bawah Unit.
- Seret peluncur Top Left, Top Right, Bottom Right dan Bottom Left untuk membundarkan setiap sudut secara berasingan.
- Hidupkan Link all corners untuk menggunakan satu nilai pada keempat-empat sudut sekaligus.
- Salin CSS yang dijana daripada pratonton dan tampalkan ke dalam lembaran gaya anda.
Semua sudut pada 50% menghasilkan bulatan atau kapsul sempurna; gunakan em atau rem supaya jejari menikut saiz taipografi.
Alat Berkaitan
- Penjana Box Shadow CSS Penjana box-shadow CSS dalam talian percuma. Cipta bayangan cantik secara visual dengan ofset, kabur, sebar, warna dan sisip boleh laras. Pratonton langsung dan salin kod serta-merta.
- Penjana Gradien CSS Cipta gradien CSS menakjubkan secara visual. Jana gradien linear, radial dan konikal dengan pelbagai henti warna, sudut dan kedudukan tersuai. Salin kod CSS sedia pengeluaran serta-merta.
- Penjana CSS Grid Penjana CSS Grid visual percuma dengan pratonton langsung. Reka susun atur grid responsif secara interaktif dan eksport kod CSS sedia produksi.
- Penjana CSS Flexbox Penjana CSS Flexbox visual dengan pratonton langsung. Laraskan sifat flex dan dapatkan kod CSS sedia guna.
- Penjana Border Radius Kreatif Penjana border radius kreatif percuma dalam talian. Seret 8 pemegang atau pilih pratetap blob untuk mencipta bentuk CSS organik dan menyalin kod dengan serta-merta.
- Penukar Warna Penukar warna dalam talian percuma. Tukar format HEX, RGB, HSL, HSV serta-merta dengan pemilih visual. 100% peribadi, berjalan dalam pelayar anda.
- Penjana Easing CSS Penjana easing CSS dalam talian percuma. Seret titik kawalan cubic-bezier pada lengkung interaktif, pilih dari 18 pratetap, lihat pratonton bola berulang dan salin fungsi pengmasaan serta-merta.
- Penjana Text Shadow CSS Penjana text-shadow CSS dalam talian percuma. Tindih beberapa lapisan bayang dengan ofset, kabur, warna dan kelegapan, cuba pratetap Neon, 3D, Retro dan salin CSS serta-merta.