1. Rumah
  2. CSS3 sudut bulat

Tutorial CSS3 sudut bulat Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari CSS3 sudut bulat,Dukungan Browser,CSS3 properti border-radius,contoh,CSS3 border-radius - menentukan setiap fillet,contoh,contoh,CSS3 bulat properti sudut,

CSS3 sudut bulat

CSS3 sudut bulat

Gunakan CSS3 properti border-radius, Anda dapat membuat setiap elemen "sudut."

CSS3 bulat pembuat

Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.

-webkit- atau tokoh sebelumnya moz menyatakan dukungan untuk versi pertama dari awalan.

属性
border-radius 9.0 5.0
4.0 -webkit-		 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5

CSS3 properti border-radius

Gunakan CSS3 properti border-radius, Anda dapat membuat setiap elemen "sudut."

Tiga contoh berikut:

1. Tentukan warna latar belakang dari elemen bulat:

Fillet!

2. Tentukan elemen perbatasan fillet:

Fillet!

3. Tentukan elemen gambar latar belakang fillet:

Fillet!

Kode adalah sebagai berikut:

contoh

# Rcorners1 {
border-radius: 25px;
background: # 8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

# Rcorners2 {
border-radius: 25px;
border: 2px solid # 8AC007;
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 »

CSS3 border-radius - menentukan setiap fillet

Jika Anda hanya menentukan satu nilai di properti border-radius, maka akan menghasilkan empat fillet.

Tetapi jika Anda ingin menentukan sebelas di empat sudut, Anda dapat menggunakan aturan berikut:

  • Empat nilai: pojok kiri nilai pertama dan nilai kedua adalah sudut kanan atas, pojok kanan bawah adalah yang ketiga, dan keempat adalah sudut kiri bawah.
  • Tiga nilai: pojok kiri nilai pertama dan nilai kedua adalah kanan atas dan kiri bawah, sudut kanan bawah dari nilai ketiga
  • Dua nilai: yang pertama adalah kiri atas dan sudut kanan bawah, dan yang kedua adalah sudut kanan atas dan sudut kiri bawah
  • Nilai: empat nilai bulat yang sama

Tiga contoh berikut:

1. empat nilai - border-radius: 15px 50px 30px 5px:

2. Tiga nilai - border-radius: 15px 50px 30px:

3. dua nilai - border-radius: 15px 50px:

Berikut ini adalah kode sumber:

contoh

# Rcorners4 {
border-radius: 15px 50px 30px 5px ;
background: # 8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

# Rcorners5 {
border-radius: 15px 50px 30px;
background: # 8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

# Rcorners6 {
border-radius: 15px 50px;
background: # 8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

Coba »

Anda juga dapat membuat sudut elips:

contoh

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Coba »

CSS3 bulat properti sudut

milik deskripsi
border-radius Keempat sudut perbatasan - * - * - sifat radius Akronim
border-top-kiri-radius Ini mendefinisikan sudut kiri atas busur
border-top-kanan-radius Ini mendefinisikan sudut kanan atas radian
border-bottom-kanan radius Ini mendefinisikan busur sudut kanan bawah
border-bottom-kiri-radius Ini mendefinisikan sudut kiri bawah busur

Tutorial Panas

Hubungi kami

CSS3 sudut bulat
10/30