W3.CSS Kenarlıkları
sınırlarım var.
Sadece sol sınırım var.
Yeşil bir üst ve alt sınırım var.
Mavi sınırlarım var.
Üzerine gelindiğinde yeşile dönen kırmızı kenarlık.
W3.CSS Sınır Sınıfları
W3.CSS, aşağıdaki sınır sınıflarını sağlar:
| Sınıf | tanımlar |
|---|---|
| w3-sınır | Bir öğeye kenarlıklar (üst, sağ, alt, sol) ekler |
| w3-kenarlık-üst | Bir öğeye üst kenarlık ekler |
| w3-sınır-sağ | Bir öğeye sağ kenarlık ekler |
| w3-kenarlık-alt | Bir öğeye alt kenarlık ekler |
| w3-sınır-sol | Bir öğeye sol kenarlık ekler |
| w3-sınır-0 | Tüm sınırları kaldırır |
| w3-kenarlık- renk | Kenarlığı belirli bir renkte görüntüler (kırmızı, mavi vb. gibi) |
| w3-hover-border- renk | Üzerine gelinebilir bir kenarlık rengi ekler |
| w3-alt çubuk | Bir öğeye kalın bir alt kenarlık ekler |
| w3-sol çubuk | Bir öğeye kalın bir sol kenarlık ekler |
| w3-sağ çubuk | Bir öğeye kalın bir sağ kenarlık ekler |
| w3-üst çubuk | Bir öğeye kalın bir üst kenarlık ekler |
Kenarlık Ekleme
w3-border sınıfları , herhangi bir HTML öğesine kenarlık eklemek için kullanılır:
sınırlarım var.
Sadece sol sınırım var.
Üst ve alt sınırlarım var.
Örnek
<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>
Kenarlık Renkleri
w3-border -color sınıfları , kenarlıklara renk eklemek için kullanılır:
Kırmızı sınırlarım var.
Mavi bir sol kenarlığım var.
Yeşil bir üst ve alt sınırım var.
Kırmızı bir sol kenarlığım ve soluk kırmızı bir arka plan rengim var.
Örnek
<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>
Yuvarlak Kenarlıklar
Yuvarlatılmış kenarlıklar eklemek için w3-round -size sınıflarından birini ekleyin:
Normal sınırlarım var.
Küçük yuvarlak sınırlarım var.
Yuvarlak sınırlarım var.
Geniş yuvarlak sınırlarım var.
xlarge yuvarlak sınırlarım var.
xxlarge yuvarlak sınırlarım var.
Örnek
<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>
Kalın Kenarlıklar
Bir öğeye kalın kenarlıklar eklemek için w3-topbar , w3-bottombar , w3-leftbar ve w3-rightbar sınıfları kullanılır:
Örnek
<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>
Gezilebilir Kenarlıklar
w3-hover-border- color sınıfları, fareyle üzerine gelindiğinde kenarlığın rengini değiştirir :
Fareyle üzerine gelindiğinde kırmızıya dönen kenarlık.
Üzerine gelindiğinde yeşile dönen kırmızı kenarlık.
Örnek
<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>
Örnek
<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>
Üzerine gelindiğinde yeşile dönen kalın beyaz (görünmez) kenarlık.
Üzerine gelindiğinde siyaha dönen kalın beyaz (görünmez) kenarlık.
Örnek
<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>