W3.CSS နယ်နိမိတ် များ
ငါ့မှာ နယ်နိမိတ်တွေရှိတယ်။
ငါ့မှာ ဘယ်ဘက်ခြမ်းပဲရှိတယ်။
အပေါ်နှင့်အောက်ခြေ အစိမ်းရောင်ဘောင်တစ်ခု ရှိသည်။
ငါ့မှာ အပြာရောင်ဘောင်တွေရှိတယ်။
မျဉ်းစောင်းပေါ်တွင် အစိမ်းရောင်ပြောင်းသွားသော အနီရောင်ဘောင်။
W3.CSS Border Classes များ
W3.CSS သည် အောက်ပါ နယ်စပ်အတန်းများကို ပေးဆောင်သည်-
| အတန်း | သတ်မှတ်ပါတယ်။ |
|---|---|
| w3-နယ်စပ် | ဒြပ်စင်တစ်ခုသို့ ဘောင်များ (အပေါ်၊ ညာ၊ အောက်ခြေ၊ ဘယ်) ကို ပေါင်းထည့်သည်။ |
| w3-နယ်စပ်-ထိပ် | ဒြပ်စင်တစ်ခုသို့ ထိပ်ဘောင်တစ်ခုကို ထည့်ပါ။ |
| w3-နယ်စပ်-ညာဘက် | ဒြပ်စင်တစ်ခုသို့ ညာဘက်ဘောင်ကို ထည့်ပါ။ |
| w3-နယ်စပ်-အောက်ခြေ | အောက်ခြေဘောင်ကို အစိတ်အပိုင်းတစ်ခုသို့ ပေါင်းထည့်သည်။ |
| w3-နယ်စပ်-ဘယ်ဘက် | အစိတ်အပိုင်းတစ်ခုသို့ ဘယ်ဘက်ဘောင်ကို ထည့်ပါ။ |
| w3-နယ်စပ်-0 | နယ်နိမိတ်အားလုံးကို ဖယ်ရှားသည်။ |
| w3-border- အရောင် | ဘောင်ကို သတ်မှတ်ထားသော အရောင်ဖြင့် ပြသည် (အနီ၊ အပြာ၊ စသည်ဖြင့်) |
| w3-hover-border- အရောင် | လွှမ်းခြုံနိုင်သော ဘောင်အရောင်ကို ထည့်ပါ။ |
| w3-အောက်ခြေဘား | ဒြပ်စင်တစ်ခုသို့ ထူသောအောက်ခြေဘောင်ကို ထည့်ပါ။ |
| w3-ဘယ်ဘက်ဘား | ဒြပ်စင်တစ်ခုသို့ ထူသော ဘယ်ဘက်ဘောင်ကို ထည့်ပါ။ |
| w3-ညာဘက်ဘား | ဒြပ်စင်တစ်ခုသို့ ထူသောညာဘက်ဘောင်ကို ထည့်သည်။ |
| w3-အပေါ်ဘား | ဒြပ်စင်တစ်ခုသို့ ထူထဲသော ထိပ်ဘောင်ကို ထည့်ပါ။ |
နယ်ခြားများထည့်ခြင်း။
မည် သည့် HTML ဒြပ်စင်သို့ ဘောင်များထည့်ရန် w3-border အတန်းများကို အသုံးပြုသည်-
ငါ့မှာ နယ်နိမိတ်တွေရှိတယ်။
ငါ့မှာ ဘယ်ဘက်ခြမ်းပဲရှိတယ်။
ကျွန်ုပ်တွင် အပေါ်နှင့်အောက်ခြေ ဘောင်များရှိသည်။
ဥပမာ
<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>
နယ်စပ်အရောင်များ
ဘောင်များသို့ အရောင်များ ထည့်ရန် w3-border -color အတန်းများကို အသုံးပြုသည်-
ငါ့မှာ အနီရောင်ဘောင်တွေရှိတယ်။
ငါ့မှာ အပြာရောင် ဘယ်ဘက်ဘောင်ရှိတယ်။
အပေါ်နှင့်အောက်ခြေ အစိမ်းရောင်ဘောင်တစ်ခု ရှိသည်။
ကျွန်ုပ်တွင် အနီရောင် ဘယ်ဘက်ဘောင်နှင့် အနီရောင်ဖျော့ဖျော့ နောက်ခံအရောင်ရှိသည်။
ဥပမာ
<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>
လုံးဝန်းသော နယ်နိမိတ်များ
လုံးဝန်းသောဘောင်များ ထည့်ရန် w3- ပတ်ပတ်လည်- အရွယ်အစား အတန်းများထဲမှ တစ်ခုကို ထည့်ပါ-
ငါ့မှာ ပုံမှန် နယ်နိမိတ်တွေ ရှိတယ်။
ငါ့မှာ သေးငယ်တဲ့ ဘောင်တွေရှိတယ်။
ငါ့မှာ လုံးဝန်းတဲ့ နယ်နိမိတ်တွေ ရှိတယ်။
ကျွန်ုပ်တွင် ကြီးမားသော ဘောင်များရှိသည်။
ကျွန်ုပ်တွင် ကြီးမားသော လုံးဝန်းသော ဘောင်များရှိသည်။
ကျွန်ုပ်တွင် xx ကြီးမားသော လုံးဝန်းသော ဘောင်များရှိသည်။
ဥပမာ
<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>
ထူထဲသောနယ်နိမိတ်များ
w3 -topbar၊ w3-bottombar ၊ w3 -leftbar နှင့် w3 -rightbar အတန်းများကို element တစ်ခုသို့ ထူသောဘောင်များထည့်ရန် အသုံးပြုသည်-
ဥပမာ
<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>
လွှမ်းခြုံနိုင်သော နယ်နိမိတ်များ
w3-hover-border- အရောင် အတန်း များသည် mouse-over တွင် နယ်စပ်၏အရောင်ကို ပြောင်းသည်-
မျဉ်းစောင်းပေါ်တွင် အနီရောင်ပြောင်းသည်။
မျဉ်းစောင်းပေါ်တွင် အစိမ်းရောင်ပြောင်းသွားသော အနီရောင်ဘောင်။
ဥပမာ
<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>
ဥပမာ
<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>
မျဉ်းစောင်းပေါ်တွင် အစိမ်းရောင်ပြောင်းသွားသော အဖြူရောင် (မမြင်နိုင်သော) ထူထဲသောဘောင်။
အဖြူပေါ်တွင် အနက်ရောင်ပြောင်းသွားသည့် ထူထဲသောအဖြူရောင် (မမြင်နိုင်သော) ဘောင်။
ဥပမာ
<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>