Penjana Border Radius

Bulatkan setiap bucu dengan gelongsor, bentuk gumpalan organik dengan mod elips, dan salin CSS serta-merta.

Pratetap
Bucu
Semua bucu
24px
CSS
Seret gelongsor untuk membulatkan bucu anda.

Setiap bucu dilukis terus dalam penyemak imbas anda. Tiada apa-apa yang anda tetapkan di sini akan dimuat naik ke BroBroGo.

Soalan Lazim

Bagaimanakah empat bucu dan px lwn % berfungsi?

Empat gelongsor dipetakan, mengikut arah jam, ke bucu atas-kiri, atas-kanan, bawah-kanan dan bawah-kiri. Dalam piksel, bucu dibulatkan mengikut jumlah tetap; dalam peratusan, ia dibulatkan secara relatif kepada kotak — peratusan mendatar mengikut lebar dan peratusan menegak mengikut ketinggian, jadi 50% menukar segi empat sama menjadi bulatan.

Apakah fungsi mod elips?

Jika dimatikan, setiap bucu ialah suku bulatan dengan satu jejari. Hidupkannya dan setiap bucu mendapat jejari mendatar dan menegak yang berasingan, yang membolehkan anda membina bentuk "gumpalan" (blob) organik yang lembut. Penjana menulis borang serong dua nilai untuk anda dan kembali ke borang pendek sebaik sahaja bucu menjadi bulat semula.

Bagaimanakah cara saya membuat bulatan sempurna atau bentuk pil?

Pautkan bucu, tukar kepada peratusan dan tetapkan 50%: segi empat sama akan menjadi bulatan. Untuk butang berbentuk pil, kekalkan piksel dan seret bucu melepasi separuh ketinggian butang — bahagian tepi akan kekal bulat sepenuhnya pada sebarang lebar. Pratetap Bulatan menetapkan kes pertama dalam satu klik.

Ditulis dan disemak oleh pasukan editorial BroBroGo.Terakhir dikemas kini:

Memahami Sifat CSS border-radius

Sifat border-radius dalam CSS digunakan untuk melaraskan tahap kebulatan bucu bagi sesuatu kotak elemen pada halaman web. Alat Penjana Border Radius membolehkan anda mengawal setiap bucu secara individu atau memautkannya bersama untuk dilaraskan secara serentak. Anda juga boleh memilih antara unit piksel (px) atau peratusan (%) bergantung pada keperluan reka bentuk anda.

Secara lalai, nilai awal gelongsor ditetapkan pada 24, yang menghasilkan kod output border-radius: 24px;. Kod CSS yang dihasilkan dipaparkan di bawah pengepala "CSS" dan boleh disalin dengan cepat menggunakan butang "Salin CSS".

Perbezaan Antara Unit Piksel dan Peratusan

Pemilihan unit memainkan peranan penting dalam menentukan bagaimana bucu kotak akan bertindak balas apabila saiz elemen berubah:

  • Unit Piksel (px): Apabila menggunakan unit piksel, bucu akan dibulatkan mengikut jumlah nilai tetap yang ditetapkan. Kebulatan ini tidak dipengaruhi oleh dimensi lebar atau tinggi elemen tersebut.
  • Unit Peratusan (%): Apabila menggunakan unit peratusan, bucu dibulatkan secara relatif kepada dimensi kotak itu sendiri. Peratusan mendatar akan mengikut ukuran lebar kotak, manakala peratusan menegak akan mengikut ukuran tinggi kotak. Penggunaan unit peratusan ini sangat berguna untuk reka bentuk responsif yang memerlukan bentuk bucu berubah mengikut skala elemen.

Membentuk Bucu Asas dan Melaraskan Gelongsor

Alat ini menyediakan gelongsor dengan julat nilai dari 0 hingga 100 untuk mengawal kebulatan. Pemetaan gelongsor ini berfungsi mengikut arah jam:

  1. Atas kiri (Top-left)
  2. Atas kanan (Top-right)
  3. Bawah kanan (Bottom-right)
  4. Bawah kiri (Bottom-left)

Apabila pilihan "Pautkan semua bucu" diaktifkan, satu gelongsor tunggal yang dinamakan "Semua bucu" akan mengawal keempat-empat penjuru secara serentak. Apabila pilihan ini dinyahaktifkan, empat gelongsor berasingan akan muncul iaitu "Atas kiri", "Atas kanan", "Bawah kanan", dan "Bawah kiri" untuk membolehkan kawalan tersuai bagi setiap penjuru.

Reka Bentuk Lanjutan dengan Mod Bucu Elips

Apabila mod "Bucu elips" dimatikan, setiap bucu kotak merupakan suku bulatan yang hanya menggunakan satu nilai jejari tunggal. Namun, apabila anda mengaktifkan mod "Bucu elips", setiap bucu akan menerima jejari mendatar ("Mendatar") dan menegak ("Menegak") yang berasingan melalui gelongsor tambahan.

Ciri ini membolehkan anda mencipta bentuk "gumpalan" (blob) organik yang lebih lembut dan tidak simetri. Dari segi sintaks CSS, penjana akan menulis kod menggunakan borang serong dua nilai (contohnya, nilai mendatar / nilai menegak) apabila mod elips aktif, dan akan kembali menulis borang pendek biasa secara automatik sebaik sahaja bucu dilaraskan menjadi bulat semula.

Teknik Membuat Bulatan Sempurna dan Bentuk Pil

Anda boleh menggunakan peraturan reka bentuk khusus untuk menghasilkan bentuk geometri popular dengan mudah:

  • Bulatan Sempurna: Untuk menukar elemen segi empat sama menjadi bulatan sempurna, pautkan semua bucu, tukar unit kepada peratusan (%), dan tetapkan nilai gelongsor pada 50%.
  • Bentuk Pil (Pill-shaped): Untuk membuat butang berbentuk pil, kekalkan penggunaan unit piksel (px) dan seret gelongsor bucu melepasi had separuh daripada ketinggian butang tersebut. Dengan cara ini, bahagian tepi kiri dan kanan akan kekal bulat sepenuhnya pada sebarang ukuran lebar kotak.

Peranan Pratetap dalam Mempercepatkan Reka Bentuk

Alat ini menyediakan beberapa butang pratetap di bawah bahagian "Pratetap" untuk menukar bentuk kotak secara serta-merta:

  • Tajam: Menghapuskan semua kebulatan bucu (menetapkan nilai kepada 0).
  • Membulat: Memberikan kebulatan standard yang seimbang pada bucu kotak.
  • Bulatan: Menetapkan semua bucu kepada nilai 50% secara automatik untuk menghasilkan bentuk bulat.
  • Gumpalan (Blob): Mengaktifkan mod elips untuk menghasilkan bentuk organik yang unik.
  • Daun: Melaraskan bucu secara bertentangan untuk menghasilkan bentuk menyerupai sehelai daun.

Pemprosesan Tempatan dan Privasi Data

Setiap bucu dan bentuk yang anda laras dilukis terus dalam penyemak imbas anda. Tiada apa-apa data atau tetapan yang anda masukkan di sini akan dimuat naik ke BroBroGo. Proses penjanaan kod CSS berlaku sepenuhnya pada peranti anda sendiri.

Soalan Lazim (FAQ)

Bagaimanakah empat bucu dan px lwn % berfungsi?
Empat gelongsor dipetakan, mengikut arah jam, ke bucu atas-kiri, atas-kanan, bawah-kanan dan bawah-kiri. Dalam piksel, bucu dibulatkan mengikut jumlah tetap; dalam peratusan, ia dibulatkan secara relatif kepada kotak — peratusan mendatar mengikut lebar dan peratusan menegak mengikut ketinggian, jadi 50% menukar segi empat sama menjadi bulatan.

Apakah fungsi mod elips?
Jika dimatikan, setiap bucu ialah suku bulatan dengan satu jejari. Hidupkannya dan setiap bucu mendapat jejari mendatar dan menegak yang berasingan, yang membolehkan anda membina bentuk "gumpalan" (blob) organik yang lembut. Penjana menulis borang serong dua nilai untuk anda dan kembali ke borang pendek sebaik sahaja bucu menjadi bulat semula.

Bagaimanakah cara saya membuat bulatan sempurna atau bentuk pil?
Pautkan bucu, tukar kepada peratusan dan tetapkan 50%: segi empat sama akan menjadi bulatan. Untuk butang berbentuk pil, kekalkan piksel dan seret bucu melepasi separuh ketinggian butang — bahagian tepi akan kekal bulat sepenuhnya pada sebarang lebar. Pratetap Bulatan menetapkan kes pertama dalam satu klik.

Adakah reka bentuk saya dihantar ke pelayan luar?
Tidak. Setiap bucu dilukis terus dalam penyemak imbas anda. Tiada apa-apa yang anda tetapkan di sini akan dimuat naik ke BroBroGo.

Penjana CSS Cubic BezierSeret dua pemegang untuk membentuk keluk pelonggaran, lihat titik bergerak melaluinya berbanding keluk yang stabil, dan salin nilai cubic-bezier().Penjana Box ShadowSeret gelongsor untuk membentuk box-shadow, susun lapisan untuk kedalaman, dan salin CSS yang telah siap serta-merta.Penjana KecerunanBina kecerunan linear, jejarian atau konik, tambah hentian warna dan tetapkan arah, kemudian salin CSS dalam satu klik.Penjana FlexboxSediakan bekas flex dan itemnya dengan kawalan visual, lihat reka letak bertindak balas secara langsung, dan salin CSS dalam satu klik.Penjana CSS GridTetapkan lajur dan baris anda, seret merentasi sel untuk meletakkan item, dan salin CSS grid dengan HTML yang sepadan dalam satu klik.Kalkulator CSS clamp()Masukkan saiz untuk skrin kecil dan besar dan dapatkan nilai clamp() bendalir yang diskalakan dengan lancar di antaranya — untuk saiz fon, padding, margin atau gap.Penukar WarnaTukar warna antara HEX, RGB, HSL, HSV, CMYK dan LAB — edit mana-mana medan dan yang lain akan dikemas kini semasa anda menaip.