CSS TINGKAT LANJUT DENGAN CSS3
4.4 BORDER CSS3
font-size :170%;
text-align :center;
padding :60px;
width :350px;
height :500px;
background :url('b1.gif') top left no-repeat, url('b2.gif') top right no-repeat,
url('b3.gif') bottom left no-repeat, url('b4.gif') bottom right no-repeat, url('ba.gif') top repeat-x,
url('bb.gif') left repeaty, url('bc.gif') right repeaty, url('bd.gif') bottom repeat-x }
</style>
</head>
<body>
<div class='border'>
<h1>Employee of the month</h1>
<h2>Awarded To:</h2>
<h3>__________________</h3>
<h2>Date:</h2>
<h3>___/___/_____</h3>
</div>
</body>
</html>
Melihat bagian CSS, kita melihat bahwa empat baris pertama dari deklarasi latar belakang menempatkan gambar sudut ke dalam empat sudut elemen, dan empat terakhir menempatkan gambar tepi, yang ditangani terakhir karena urutan prioritas untuk gambar latar pergi dari tinggi ke rendah. Dengan kata lain, di mana mereka tumpang tindih, gambar latar belakang tambahan akan muncul di belakang gambar yang sudah ditempatkan. Jika GIF berada dalam urutan terbalik, gambar tepi berulang akan ditampilkan di atas sudut, yang akan salah.
Properti ini menetapkan semua batas elemen menjadi abu-abu tengah. kita juga dapat mengatur warna batas satu per satu, seperti ini (yang mengatur warna batas ke berbagai warna abu-abu):
border-top-color :#000;
border-left-color :#444;
border-right-color :#888;
border-bottom-color:#ccc;
Anda juga dapat mengatur semua warna satu per satu dengan satu deklarasi, sebagai berikut:
border-color:#f00 #0f0 #880 #00f;
Deklarasi ini menetapkan warna batas atas menjadi #f00, yang kanan menjadi #0f0, yang bawah menjadi #880, dan yang kiri menjadi #00f (masing-masing merah, hijau, oranye, dan biru). kita juga dapat menggunakan nama warna untuk argumen.
Properti radius border
Sebelum CSS3, pengembang web berbakat datang dengan banyak penyesuaian dan perbaikan yang berbeda untuk mencapai batas bulat, umumnya menggunakan tag <table>
atau <div>. Tapi sekarang menambahkan batas bulat ke elemen sangat sederhana, dan ini berfungsi pada versi terbaru dari semua browser utama, seperti yang ditunjukkan pada Gambar 4.3, di mana batas 10-piksel ditampilkan dengan cara yang berbeda. Contoh 2 menunjukkan HTML untuk ini.
Contoh 2 Properti borderradius
<!DOCTYPE html>
<html> <!-- borderradius.html -->
<head>
<title>CSS3 Border Radius Examples</title>
<style>
.box {
margin-bottom:10px;
font-family :'Courier New', monospace;
font-size :12pt;
text-align :center;
padding :10px;
width :380px;
height :75px;
border :10px solid #006;
} .b1 {
-moz-border-radius :40px;
-webkit-border-radius:40px;
borderradius :40px;
} .b2 {
-moz-border-radius :40px 40px 20px 20px;
-webkit-border-radius:40px 40px 20px 20px;
borderradius :40px 40px 20px 20px;
} .b3 {
-moz-border-radius-topleft :20px;
-moz-border-radius-topright :40px;
-moz-border-radius-bottomleft :60px;
-moz-border-radius-bottomright :80px;
-webkit-border-topleft-radius :20px;
-webkit-border-topright-radius :40px;
-webkit-border-bottomleft-radius :60px;
-webkit-border-bottomright-radius:80px;
border-top-left-radius :20px;
border-top-right-radius :40px;
border-bottom-left-radius :60px;
border-bottom-right-radius :80px;
} .b4 {
-moz-border-radius-topleft :40px 20px;
-moz-border-radius-topright :40px 20px;
-moz-border-radius-bottomleft :20px 40px;
-moz-border-radius-bottomright :20px 40px;
-webkit-border-topleft-radius :40px 20px;
-webkit-border-topright-radius :40px 20px;
-webkit-border-bottomleft-radius :20px 40px;
-webkit-border-bottomright-radius:20px 40px;
border-top-left-radius :40px 20px;
border-top-right-radius :40px 20px;
border-bottom-left-radius :20px 40px;
border-bottom-right-radius :20px 40px;
}
</style>
</head>
<body>
<div class='box b1'>
borderradius:40px;
</div>
<div class='box b2'>
borderradius:40px 40px 20px 20px;
</div>
<div class='box b3'>
border-top-left-radius :20px;<br>
border-top-right-radius :40px;<br>
border-bottom-left-radius :60px;<br>
border-bottom-right-radius:80px;
</div>
<div class='box b4'>
border-top-left-radius :40px 20px;<br>
border-top-right-radius :40px 20px;<br>
border-bottom-left-radius :20px 40px;<br>
border-bottom-right-radius:20px 40px;
</div>
</body>
</html>
Gambar 4.3 Mencampur dan mencocokkan berbagai properti radius border
Jadi, misalnya, untuk membuat batas bulat dengan radius 20 piksel, kita cukup menggunakan deklarasi berikut:
borderradius:20
Anda dapat menentukan radius terpisah untuk masing-masing dari empat sudut, seperti ini (diterapkan searah jarum jam mulai dari sudut kiri atas):
borderradius:10px 20px 30px 40px;
Jika mau, kita juga dapat menangani setiap sudut elemen satu per satu, seperti ini:
border-top-left-radius :20px;
border-top-right-radius :40px;
border-bottom-left-radius :60px;
border-bottom-right-radius:80px;
Dan, saat mereferensikan setiap sudut, kita dapat memberikan dua argumen untuk memilih radius vertikal dan horizontal yang berbeda (memberikan batas yang lebih menarik dan halus) seperti ini:
border-top-left-radius :40px 20px;
border-top-right-radius :40px 20px;
border-bottom-left-radius :20px 40px;
border-bottom-right-radius:20px 40px;
Argumen pertama adalah horizontal, dan yang kedua adalah radius vertikal.