toolsmoah

Penjana Jejari Sempadan

Mencipta dan pratonton sifat border-radius CSS secara visual.

CSS Dijana
Laraskan kebulatan setiap sudut
Pratonton
Pratonton kesan jejari sempadan yang dihasilkan
Pratonton
CSS Dijana
border-radius: 20px;
Contoh
Klik pada gaya jejari sempadan yang telah ditetapkan untuk menggunakannya
Sifat Jejari Sempadan

Susunan Sifat

Sifat border-radius digunakan mengikut arah jam: atas-kiri → atas-kanan → bawah-kanan → bawah-kiri

Sifat Singkatan

  • • border-radius: 10px; - Digunakan untuk keempat-empat sudut
  • • border-radius: 10px 20px; - Yang pertama digunakan untuk atas-kiri dan bawah-kanan, yang kedua untuk atas-kanan dan bawah-kiri
  • • border-radius: 10px 20px 30px; - Yang pertama digunakan untuk atas-kiri, yang kedua untuk atas-kanan dan bawah-kiri, yang ketiga untuk bawah-kanan
  • • border-radius: 10px 20px 30px 40px; - Digunakan untuk atas-kiri, atas-kanan, bawah-kanan, dan bawah-kiri mengikut susunan

Petua Penggunaan

  • • Gunakan 50% untuk mencipta bulatan sempurna
  • • 4-8px biasanya baik untuk butang
  • • 8-16px adalah biasa untuk kad dan panel
  • • Jejari tidak simetri boleh mencipta kesan reka bentuk yang unik