Kelas perbatasan
Kelas perbatasan W3.CSS dapat digunakan pada setiap elemen HTML.
Saya memiliki batas di semua sisi.
Saya memiliki batas bawah merah
Saya memiliki batas bulat.
Contoh
<div class="w3-border">
<p>I have borders on all sides.</p>
</div>
<div class="w3-border-bottom w3-border-red">
<p>I have
a red bottom border.</p>
</div>
<div class="w3-border
w3-round-xlarge">
<p>I have rounded borders.</p>
</div>
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>I have a blue leftbar.</p>
</div>
Cobalah sendiri " menampilkan Catatan
Catatan sering ditampilkan dengan warna pucat dan bar berwarna:
Contoh
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Cobalah sendiri " menampilkan Panel
Panel dapat ditampilkan dalam satu juta cara yang berbeda:
London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.
London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.
London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.
Contoh
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> Cobalah sendiri " menampilkan Quotes
Kelas w3-kontainer dapat digunakan untuk menampilkan tanda kutip.
Contoh
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it
as simple as possible, but not simpler."</i></p>
<p>Albert
Einstein</p>
</div> Cobalah sendiri " Jika Anda menggunakan HTML <blockquote>, ingat bahwa HTML akan menambahkan margin kiri ekstra:
"Buatlah sesederhana mungkin, tetapi tidak sederhana."
Albert Einstein
Contoh
<blockquote class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make
it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote> Cobalah sendiri " Hoverable Borders
Kelas warna w3-melayang-border- mengubah warna perbatasan pada mouse-over:
perbatasan hoverable merah
perbatasan ungu yang berubah biru di hover
Contoh
<div class="w3-container w3-border w3-hover-border-red">
<p>Red
hoverable border</p>
</div> Cobalah sendiri "