Perbatasan W3.CSS
Saya memiliki perbatasan.
Saya hanya memiliki batas kiri.
Saya memiliki batas atas dan bawah berwarna hijau.
Saya memiliki batas biru.
Batas merah yang berubah menjadi hijau saat melayang.
Kelas Perbatasan W3.CSS
W3.CSS menyediakan kelas perbatasan berikut:
| Kelas | Mendefinisikan |
|---|---|
| w3-perbatasan | Menambahkan batas (atas, kanan, bawah, kiri) ke elemen |
| w3-perbatasan-atas | Menambahkan batas atas ke elemen |
| w3-batas-kanan | Menambahkan batas kanan ke elemen |
| w3-perbatasan-bawah | Menambahkan batas bawah ke elemen |
| w3-perbatasan-kiri | Menambahkan batas kiri ke elemen |
| w3-perbatasan-0 | Menghapus semua batas |
| w3-perbatasan- warna | Menampilkan batas dalam warna tertentu (seperti merah, biru, dll) |
| w3-hover-border- warna | Menambahkan warna batas yang dapat dilayangkan |
| w3-bawah | Menambahkan batas bawah yang tebal ke sebuah elemen |
| w3-bilah kiri | Menambahkan batas kiri yang tebal ke sebuah elemen |
| w3-rightbar | Menambahkan batas kanan yang tebal ke sebuah elemen |
| w3-topbar | Menambahkan batas atas yang tebal ke sebuah elemen |
Menambahkan Perbatasan
Kelas w3-border digunakan untuk menambahkan batas ke elemen HTML apa pun:
Saya memiliki perbatasan.
Saya hanya memiliki batas kiri.
Saya memiliki batas atas dan bawah.
Contoh
<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>
<div class="w3-panel w3-border-left">
<p>I have only a left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>
Warna Perbatasan
Kelas w3-border -color digunakan untuk menambahkan warna ke perbatasan:
Saya memiliki batas merah.
Saya memiliki batas kiri biru.
Saya memiliki batas atas dan bawah berwarna hijau.
Saya memiliki batas kiri merah dan warna latar belakang merah pucat.
Contoh
<div class="w3-panel w3-border w3-border-red">
<p>I have red borders.</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>I have a blue left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>I have a green top and bottom border.</p>
</div>
Perbatasan Bulat
Untuk menambahkan batas bulat, tambahkan salah satu kelas w3-round -size :
Saya memiliki batas normal.
Saya memiliki batas bulat kecil.
Saya memiliki batas yang membulat.
Saya memiliki batas bulat besar.
Saya memiliki batas bulat xlarge.
Saya memiliki batas bulat xxlarge.
Contoh
<div class="w3-panel w3-border">
<p>My borders are normal.</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>My borders are rounded (small).</p>
</div>
<div class="w3-panel
w3-border w3-round">
<p>My borders are rounded.</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>I have
large rounded borders.</p>
</div>
<div class="w3-panel w3-border
w3-round-xlarge">
<p>I have xlarge rounded borders.</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>I have
xxlarge rounded borders.</p>
</div>
Perbatasan Tebal
Kelas w3-topbar , w3-bottombar , w3-leftbar , dan w3-rightbar digunakan untuk menambahkan batas tebal ke elemen:
Contoh
<div class="w3-panel w3-leftbar">
<p>I have a thick left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
<p>I have a thick blue left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>I have a thick blue left border and a pale-blue background color.</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>I have a thick red top and bottom border and a pale-red background color.</p>
</div>
Perbatasan yang Dapat Dilayangkan
Kelas warna w3-hover-border- mengubah warna perbatasan pada mouse-over:
Perbatasan yang berubah menjadi merah saat melayang.
Batas merah yang berubah menjadi hijau saat melayang.
Contoh
<div class="w3-panel w3-border w3-hover-border-red">
<p>Border that turns red on hover</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>Red border that turns green on hover</p>
</div>
Contoh
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>Thick (invisible) left border that turns green on hover.</p>
</div>
<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>Thick (invisible) bottom border that turns green on hover.</p>
</div>
Batas putih tebal (tidak terlihat) yang berubah menjadi hijau saat melayang.
Batas putih tebal (tidak terlihat) yang berubah menjadi hitam saat melayang.
Contoh
<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
<p>Thick (invisible) border that turns green on hover.</p>
</div>
<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
<p>Thick (invisible) border that turns black on hover.</p>
</div>