CSS3 Rounded Corners
Dengan properti CSS3 border-radius, Anda dapat memberikan setiap elemen "sudut membulat".
CSS3 border-radius Properti
Dengan CSS3, Anda dapat memberikan setiap elemen "sudut membulat", dengan menggunakan properti border-radius.
Berikut adalah tiga contoh:
1. Sudut dibulatkan untuk elemen dengan warna latar belakang tertentu:
2. Sudut dibulatkan untuk elemen dengan perbatasan:
3. Sudut dibulatkan untuk elemen dengan gambar latar belakang:
Berikut adalah kode:
.bulat1 {
border-radius: 50px;
width: 300px;
height: 300px;
background: yellow;
}
.bulat2 {
border-radius: 50px;
width: 300px;
height: 300px;
border: 5px solid yellow;
}
.bulat3 {
border-radius: 50px;
width: 300px;
height: 300px;
background-image: url(bg5.png);
background-position: left top;
background-repeat: repeat;
}
Tip: Properti border-radius sebenarnya adalah properti singkat untuk perbatasan-top-kiri-radius, border-top-kanan-radius, border-bottom-kanan-radius dan properti border-bottom-kiri-radius. Namun, dalam tutorial ini kita hanya akan menggunakan properti singkatan border-radius.
Dengan CSS3, Anda dapat memberikan setiap elemen "sudut membulat", dengan menggunakan properti border-radius.
Berikut adalah tiga contoh:
1. Sudut dibulatkan untuk elemen dengan warna latar belakang tertentu:
CSS3 border-radius - Tentukan Setiap Sudut
Bila hanya satu nilai untuk properti border-radius, radius ini akan diterapkan untuk semua 4 sudut.
Namun, Anda dapat menentukan setiap sudut secara terpisah jika Anda inginkan. Berikut adalah aturan:
- Empat nilai: nilai pertama berlaku untuk top-kiri, nilai kedua berlaku untuk kanan atas, nilai ketiga berlaku untuk kanan bawah, dan nilai keempat berlaku untuk sudut kiri bawah
- Tiga nilai: nilai pertama berlaku untuk top-kiri, nilai kedua berlaku ke atas kanan dan bawah-kiri, dan nilai ketiga berlaku untuk kanan bawah
- Dua nilai: nilai pertama berlaku untuk pojok kiri dan kanan bawah, dan nilai kedua berlaku untuk top-kanan dan sudut kiri bawah
- Satu nilai: keempat sudut dibulatkan sama
Berikut adalah tiga contoh:
1. Empat nilai - border-radius: 15px 50px 30px 5px:
.bulat1 {
border-radius: 15px 50px 30px 5px;
padding: 20px;
width: 300px;
height: 300px;
background: yellow;
}
2. Tiga nilai - border-radius: 15px 50px 30px:
.bulat2 {
border-radius: 15px 50px 30px;
padding: 20px;
width: 300px;
height: 300px;
background: yellow;
}
3. Dua nilai - border-radius: 15px 50px:
.bulat3 {
border-radius: 15px 50px;
padding: 20px;
width: 300px;
height: 300px;
background: yellow;
}
Anda juga bisa membuat sudut elips:
.bulat1 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
.bulat2 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
.bulat3 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
Bila hanya satu nilai untuk properti border-radius, radius ini akan diterapkan untuk semua 4 sudut.
Namun, Anda dapat menentukan setiap sudut secara terpisah jika Anda inginkan. Berikut adalah aturan:
Berikut adalah tiga contoh:
1. Empat nilai - border-radius: 15px 50px 30px 5px:
.bulat1 {
border-radius: 15px 50px 30px 5px;
padding: 20px;
width: 300px;
height: 300px;
background: yellow;
}
2. Tiga nilai - border-radius: 15px 50px 30px:
.bulat2 {
border-radius: 15px 50px 30px;
padding: 20px;
width: 300px;
height: 300px;
background: yellow;
}
3. Dua nilai - border-radius: 15px 50px:
.bulat3 {
border-radius: 15px 50px;
padding: 20px;
width: 300px;
height: 300px;
background: yellow;
}
Anda juga bisa membuat sudut elips:
.bulat1 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
.bulat2 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
.bulat3 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
0 komentar:
Posting Komentar