Gilingan CSS

Gilingan CSS

melalui CSS border-radius Sifat, boleh membolehkan gaya 'corner round' untuk setiap elemen.

属性 border-radius CSS

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

Petunjuk:Anda dapat menggunakan properti ini untuk menambah bulat pinggir kepada elemen!

Di sini ada tiga contoh:

1. Element yang mempunyai warna latar belakang yang ditentukan dengan bulat pinggir:

Bulat pinggir!

2. Element yang mempunyai garisan pinggir dengan bulat pinggir:

Bulat pinggir!

3. Element yang mempunyai imej latar belakang dengan bulat pinggir:

Bulat pinggir!

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; 
}

Cuba sendiri

Petunjuk: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 - Tentukan setiap sudut

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

Empat nilai - border-radius: 15px 50px 30px 5px;(Secara berurutan digunakan 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 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, bulat pinggir 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; 
}

Cuba 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;
}

Cuba sendiri

Properti bulat pinggir CSS

Properti Penerangan
border-radius Penggunaan properti singkat untuk setiap empat border-*-*-radius.
border-top-left-radius 定义形状边框左上角。
border-top-right-radius 定义形状边框右上角。
border-bottom-right-radius 定义形状边框右下角。
border-bottom-left-radius 定义形状边框左下角。