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.
Apakah maksud sintaks border-radius dengan 8 nilai?
Dalam sintaks border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, nilai sebelum garis condong ialah radius mengufuk (kiri atas, kanan atas, kanan bawah, kiri bawah) dan nilai selepasnya ialah radius menegak. Nilai berbeza pada setiap arahlah yang menghasilkan bentuk blob organik.
Bagaimana menggunakan CSS yang dijana?
Salin baris border-radius dan tampalkan ke mana-mana peraturan CSS elemen yang ingin dibentuk, contohnya .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Berfungsi dalam CSS tulen, Sass, nilai sewenang-wenang Tailwind dan gaya sebaris.
Di mana bentuk blob biasa digunakan?
Bentuk blob popular untuk ilustrasi wira, avatar, gambar profil, kad ciri, butang dan latar belakang hiasan dalam reka bentuk web dan aplikasi moden.
Adakah sudut membulat disokong semua pelayar?
Ya. border-radius disokong oleh semua pelayar moden, termasuk Chrome, Firefox, Safari, Edge dan pelayar mudah alih, tanpa sebarang awalan vendor.
Bolehkah bentuk blob dianimasikan?
Boleh. border-radius ialah sifat yang boleh dianimasikan, jadi transisi CSS membolehkan morf lancar antara bentuk, contohnya .blob { transition: border-radius .8s ease; }.
Apakah beza antara sintaks 4 nilai dan 8 nilai?
Bentuk 4 nilai menetapkan radius mengufuk dan menegak yang sama untuk setiap sudut, cukup untuk bentuk pil atau bulatan. Bentuk 8 nilai memisahkan radius mengufuk dan menegak, membolehkan bentuk asimetri yang organik.
Bagaimana mencipta bulatan sempurna?
Tetapkan kesemua lapan nilai kepada 50% pada elemen segi empat sama, atau gunakan sahaja border-radius: 50%. Anda juga boleh bermula dengan pratetap yang hampir menyerupai bulatan.
Adakah data saya dimuat naik ke mana-mana?
Tidak. Penjana ini berjalan sepenuhnya dalam pelayar anda menggunakan CSS dan JavaScript tulen. Apa sahaja yang anda seret, taip atau salin tidak dihantar ke mana-mana pelayan.
Bolehkah digunakan pada elemen bukan segi empat sama?
Boleh, tetapi radius peratusan adalah relatif kepada dimensi elemen, jadi segi empat tepat akan menghasilkan sudut elips dan kelihatan berbeza daripada pratonton segi empat sama. Gunakan nilai yang dijana sebagai titik mula dan laraskan.
Cara Menggunakan Penjana Border Radius Kreatif
Border-radius lapan nilai menghasilkan bentuk blob organik dengan penjuru elips yang tidak dapat dicapai oleh segi empat tepat bulat biasa. Bentukkannya dengan pemegang seret dan salin CSS yang siap — semuanya dipaparkan serta-merta dalam pelayar anda.
- Seret mana-mana daripada lapan pemegang di tepi bentuk — pemegang di tepi atas dan bawah mengawal radius mengufuk, manakala di kiri dan kanan mengawal radius menegak.
- Klik salah satu daripada enam petak pratetap untuk bermula daripada blob yang telah direka, kemudian halusi nilainya melalui input nombor Radius mengufuk dan Radius menegak (satu bagi setiap penjuru, 0–100%).
- Tekan Rawak untuk menjana bentuk organik baharu dengan satu klik, atau Set semula untuk kembali kepada bentuk dan warna lalai.
- Pilih Warna bentuk dan Latar belakang untuk melihat blob di atas palet sasaran anda — kedua-duanya dikemas kini serta-merta.
- Tekan Salin CSS untuk mengambil pengisytiharan border-radius yang dipaparkan secara langsung di bar bawah dan tampalkannya pada mana-mana elemen.
Gunakan kod ini pada elemen segi empat sama dengan overflow: hidden untuk penampilan blob klasik; peratus mengekalkan kelengkungan pada semua saiz, dan palang condong dalam sintaks memisahkan radius mengufuk daripada menegak.
Alat Berkaitan
- Penjana Border Radius CSS Penjana border-radius CSS visual. Laraskan setiap sudut secara bebas dengan pratonton masa nyata dan salin kod CSS 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 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 Palet Warna Cipta palet warna yang indah dan harmoni serta-merta dengan penjana dalam talian percuma kami. Menyokong mod monokromatik, analog, pelengkap, triadik, split-pelengkap, dan tetradik. Sesuaikan warna dengan peluncur HSL, kunci kegemaran, dan eksport sebagai CSS, Tailwind, JSON, atau SVG. 100% berasaskan pelayar, data anda tidak pernah meninggalkan peranti.
- 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.
- Penjana Clip Path CSS Penjana clip-path CSS dalam talian percuma. Reka bentuk polygon, circle, ellipse dan inset dengan titik boleh seret, pratonton langsung dan salin kod CSS sekali klik.