CSS3 sudut bulat
CSS3 sudut bulat
Gunakan CSS3 properti border-radius, Anda dapat membuat setiap elemen "sudut."
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
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
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
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 |