Belakang Bulat CSS

Belakang Bulat CSS

Melalui CSS border-radius Properti, boleh mencapai gaya 'bujur bulat' mana-mana elemen.

属性 border-radius CSS

CSS border-radius Properti menentukan jari-jari sudut elemen.

Panduan:Anda dapat menggunakan properti ini untuk menambahkan sudut bulat ke elemen!

Disini ada tiga contoh:

1. Element yang memiliki warna latar belakang yang ditentukan dengan sudut bulat:

Bulat sudut!

2. Element yang memiliki garis bercorak dengan sudut bulat:

Bulat sudut!

3. Element yang memiliki gambar latar belakang dengan sudut bulat:

Bulat sudut!

Ini adalah kod:

Contoh

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Coba sendiri

Panduan:border-radius Properti ini adalah properti singkat untuk properti berikut:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - Tetapkan setiap sudut

border-radius Properti dapat menerima satu hingga empat nilai. Aturan seperti berikut:

Empat nilai - border-radius: 15px 50px 30px 5px;(Digunakan secara berturut-turut untuk: sudut kiri atas, sudut kanan atas, sudut kanan bawah, sudut kiri bawah):

Tiga nilai - border-radius: 15px 50px 30px;(Nilai pertama digunakan untuk sudut kiri atas, nilai kedua digunakan untuk sudut kanan atas dan kiri bawah, nilai ketiga digunakan untuk sudut kanan bawah):

Dua nilai - border-radius: 15px 50px;(Nilai pertama digunakan untuk sudut kiri atas dan kanan bawah, nilai kedua digunakan untuk sudut kanan atas dan kiri bawah):

Satu nilai - border-radius: 15px;(Nilai ini digunakan untuk empat sudut, sudut bulat adalah sama):

Ini adalah kod:

Contoh

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Coba sendiri

Anda juga dapat membuat sudut bulat:

Contoh

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

Coba sendiri

Properti bulat sudut CSS

Properti Deskripsi
border-radius Penggunaan untuk menetapkan properti singkat seluruh empat border-*-*-radius.
border-top-left-radius 形状 边框 左上 定义
border-top-right-radius 形状 边框 右上 定义
border-bottom-right-radius 形状 边框 右下 定义
border-bottom-left-radius 形状 边框 左下 定义