W3.CSS chegaralar
W3.CSS chegaralari
W3.CSS HTML elementlariga chegara qo‘shishni osonlashtiradi.
Chegaralarni barcha tomonlarga yoki faqat tanlangan tomonlarga qo‘shishingiz mumkin.
Bu elementning chegarasi bor.
Misol
<div class="w3-panel w3-border">
<p>This element has a border.</p>
</div>
O‘zingiz sinab ko‘ring »
Chegara klasslari
Chegara qayerda paydo bo‘lishini boshqarish uchun quyidagi klasslardan foydalaning:
| Klass | Tavsif |
|---|---|
w3-border |
Barcha tomonlarga chegara qo‘shadi |
w3-border-top |
Yuqori chegara qo‘shadi |
w3-border-right |
O‘ng chegara qo‘shadi |
w3-border-bottom |
Pastki chegara qo‘shadi |
w3-border-left |
Chap chegara qo‘shadi |
w3-topbar |
Qalin yuqori chegara qo‘shadi |
w3-rightbar |
Qalin o‘ng chegara qo‘shadi |
w3-bottombar |
Qalin pastki chegara qo‘shadi |
w3-leftbar |
Qalin chap chegara qo‘shadi |
Chegara ranglari
Chegara klasslarini w3-border-color klasslari bilan birga ishlating.
Qizil chegara
Yashil chegara
Ko‘k chegara
Misol
<div class="w3-panel w3-border w3-border-red">Red border</div>
<div class="w3-panel w3-border w3-border-green">Green border</div>
<div class="w3-panel w3-border w3-border-blue">Blue border</div>
O‘zingiz sinab ko‘ring »
Turli tomonlardagi chegaralar
Elementning bir chetini ta’kidlamoqchi bo‘lsangiz, faqat bir tomonga qo‘yiladigan chegaralar qulay.
Chap chegara
O‘ng chegara
Yuqori chegara
Pastki chegara
Misol
<div class="w3-panel w3-border-top">Top border</div>
<div class="w3-panel w3-border-right">Right border</div>
<div class="w3-panel w3-border-bottom">Bottom border</div>
<div class="w3-panel w3-border-left">Left border</div>
O‘zingiz sinab ko‘ring »
Qalin chegaralar
Qalinroq chegara kerak bo‘lsa, bar klasslaridan foydalaning.
w3-topbar, w3-bottombar, w3-leftbar va w3-rightbar klasslari elementga qalin chegaralar qo‘shish uchun ishlatiladi:
Misol
<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>
Chegara va fon ranglari
Yanada yaqqolroq vizual bo‘limlar yaratish uchun chegara ranglarini fon ranglari bilan birlashtirish mumkin.
Misol
<div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue">
<h3>Information</h3>
<p>Your account was updated.</p>
</div>
<div class="w3-panel w3-pale-yellow w3-leftbar w3-border-yellow">
<p><b>Warning</b></p>
<p>Your session expires soon.</p>
</div>
Semantik xabarlar uchun W3.CSS w3-info, w3-warning va w3-danger kabi klasslarni ham taqdim etadi.
Yumaloq chegaralar
Yumshoqroq shakllar yaratish uchun w3-border klassini W3.CSS’ning w3-round klasslari bilan birga ishlating.
Yumaloq chegara
Katta yumaloq chegara
Misol
<div class="w3-panel w3-border w3-round">
<p>Rounded border</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>Large rounded border</p>
</div>
O‘zingiz sinab ko‘ring »
Tarif kartochkasini yaratish
Chegaralar kontentni quyuq fon ranglarisiz ajratish va ta’kidlash uchun qulay.
Pro Plan
For teams that need more storage and collaboration tools.
$19 / month
Misol
<div class="w3-card w3-border w3-border-blue w3-round-large">
<div class="w3-container">
<h2>Pro Plan</h2>
<p>For teams that need more storage and collaboration tools.</p>
<p><b>$19 / month</b></p>
<p><button class="w3-button w3-blue">Choose Plan</button></p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Hover’da o‘zgaradigan chegaralar
w3-hover-border-color klasslari sichqoncha ustiga olib borilganda chegara rangini o‘zgartiradi:
Hover’da qizilga aylanadigan chegara.
Hover’da yashilga aylanadigan qizil chegara.
Misol
<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>
O‘zingiz sinab ko‘ring »
Misol
<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>
Hover’da yashilga aylanadigan qalin oq (ko‘rinmas) chegara.
Hover’da qoraga aylanadigan qalin oq (ko‘rinmas) chegara.
Misol
<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>
Yumaloq chegaralar
Mening chegaralarim oddiy.
Mening chegaralarim biroz yumaloq.
Mening chegaralarim yumaloq.
Mening chegaralarim kattaroq yumaloq.
Mening chegaralarim juda katta yumaloq (xlarge).
Mening chegaralarim eng katta yumaloq (xxlarge).
Misol
<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>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!