CSS User Interface

ဤအခန်းတွင် အောက်ပါ CSS အသုံးပြုသူ အင်တာဖေ့စ် ဂုဏ်သတ္တိများအကြောင်း လေ့လာနိုင်ပါမည်-

resize
outline-offset

Browser ပံ့ပိုးမှု

ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။

Property
resize	4.0	79.0	5.0	4.0	15.0
outline-offset	4.0	15.0	5.0	4.0	9.5

CSS Resizing

resizeပိုင်ဆိုင်မှုသည် အသုံးပြုသူမှ အစိတ်အပိုင်းတစ်ခုအား အရွယ်အစားပြောင်းလဲနိုင်မှု ရှိ၊ မရှိ (နှင့်မည်ကဲ့သို့) သတ်မှတ်ပေးသည် ။

ဤ div အစိတ်အပိုင်းကို အသုံးပြုသူက အရွယ်အစားပြောင်းနိုင်သည်။

အရွယ်အစားပြောင်းရန်- ဤ div အစိတ်အပိုင်း၏ အောက်ခြေညာဘက်ထောင့်ကို နှိပ်ပြီး ဆွဲယူပါ။

အောက်ဖော်ပြပါ ဥပမာသည် အသုံးပြုသူအား <div> ဒြပ်စင်တစ်ခု၏ အကျယ်ကိုသာ အရွယ်အစားပြောင်းစေသည်-

ဥပမာ

div {
resize: horizontal;
overflow: auto;
}

အောက်ဖော်ပြပါ ဥပမာသည် သုံးစွဲသူအား <div> ဒြပ်စင်တစ်ခု၏ အမြင့်ကိုသာ အရွယ်အစားပြောင်းလဲစေသည်-

ဥပမာ

div {
resize: vertical;
overflow: auto;
}

အောက်ဖော်ပြပါ ဥပမာသည် အသုံးပြုသူအား <div> ဒြပ်စင်တစ်ခု၏ အမြင့်နှင့် အကျယ် နှစ်ခုလုံးကို အရွယ်အစားပြောင်းလဲနိုင်စေသည်-

ဥပမာ

div {
resize: both;
overflow: auto;
}

ဘရောက်ဆာများစွာတွင်၊ <textarea> ကို မူရင်းအတိုင်း အရွယ်အစားပြောင်းလဲနိုင်သည်။ ဤတွင်၊ အရွယ်အစားပြောင်းလဲနိုင်မှုကို ပိတ်ရန် ကျွန်ုပ်တို့သည် အရွယ်အစားပြောင်းလဲခြင်း ပိုင်ဆိုင်မှုကို အသုံးပြုထားပါသည်။

ဥပမာ

textarea {
resize: none;
}

CSS Outline Offset

outline-offsetပိုင်ဆိုင်မှုသည် ကောက်ကြောင်းတစ်ခုနှင့် အစွန်း သို့မဟုတ် ဒြပ်စင်တစ်ခု၏ ဘောင်ကြားတွင် နေရာလွတ်ကို ပေါင်းထည့်သည် ။

ဤ div သည် နယ်ခြားအစွန်းအပြင်ဘက်တွင် 15px အကောက်ပါရှိသည်။

မှတ်ချက်- ကောက်ကြောင်းသည် နယ်နိမိတ်များနှင့် ကွဲပြားသည်။ ဘောင်နှင့်မတူဘဲ၊ ကောက်ကြောင်းကို ဒြပ်စင်၏ဘောင်အပြင်ဘက်တွင် ဆွဲထားပြီး အခြားအကြောင်းအရာကို ထပ်နေနိုင်သည်။ ထို့အပြင်၊ ကောက်ကြောင်းသည် ဒြပ်စင်၏အတိုင်းအတာ၏ အစိတ်အပိုင်းတစ်ခုမဟုတ်ပါ။ ဒြပ်စင်၏ စုစုပေါင်း အကျယ်နှင့် အမြင့်သည် ကောက်ကြောင်း၏ အကျယ်အားဖြင့် သက်ရောက်မှုမရှိပါ။

အောက်ဖော်ပြပါ ဥပမာသည် outline-offsetဘောင်နှင့် ကောက်ကြောင်းကြားတွင် နေရာလွတ်ကို ထည့်ရန် ပိုင်ဆိုင်မှုကို အသုံးပြုသည်-

ဥပမာ

div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}