စတွဲပေါင်း အသုံးပြုသူ ဆိုင်ရာ

စတွဲပေါင်း အသုံးပြုသူ ဆိုင်ရာ

在本章中，您将学到以下 CSS 用户界面属性：

  • resize
  • outline-offset

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性 Chrome IE Firefox Safari Opera
resize 4.0 不支持 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS အစိတ်အခံ အရွယ်အစား

resize အချက်အလက် အား အသုံးပြုသူ အား အစိတ်အခံ အရွယ်အစား ပြုလုပ်သင့်မည် နှင့် တို့မှာ ပြုလုပ်သင့်မည် ကို အမိန့်ပေးပါသည်。

အခြေအနေ အစိတ်အခံ အရွယ်အစား ပြုလုပ်နိုင်သည့် အခြေအနေ ပါသည်！

အရွယ်အစား ပြုလုပ်ခြင်းပြုလုပ်ပါက အစိတ်အခံ အစိတ်အနီး အရွယ်အစား အနောက်ဘက် အောက်ဘက် ကို စိတ်ပျက်လုပ်ပါ။

အမှန်တကယ်：Internet Explorer အား resize အချက်အလက် ကို လုပ်ခဲ့ပါသည်。

အောက်ပါ ပုံစံ တွင် အသုံးပြုသူ အား <div> အစိတ်အခ� အရွယ်အစား အား အားလုံး လျှော့ပြောင်းလုပ်နိုင်သည့် အခွင့်အရေး ပြုလုပ်ပါသည်：

ဌာန

div {
  resize: horizontal;
  overflow: auto;
}

亲自试一试

အောက်ပါ ပုံစံ တွင် အသုံးပြုသူ အား <div> အစိတ်အခံ အရွယ်အစား အား အားလုံး လျှော့ပြောင်းလုပ်နိုင်သည့် အခွင့်အရေး ပြုလုပ်ပါသည်：

ဌာန

div {
  resize: vertical;
  overflow: auto;
}

亲自试一试

အောက်ပါ ပုံစံ တွင် အသုံးပြုသူ အား <div> အစိတ်အခံ အရွယ်အစား အား လျှော့ပြောင်းလုပ်နိုင်သည့် အခွင့်အရေး ပြုလုပ်ပါသည်：

ဌာန

div {
  resize: both;
  overflow: auto;
}

亲自试一试

အချို့ ဘူးသတ္တု တွင် <textarea> အချက်အလက် အရ အင်ဂျင်နီယာ အရွယ်အစား လျှော့ပါသည်။ အခြားအချက်အလက် တွင် ကျွန်တော်တို့ resize အချက်အလက် ကို အသုံးပြုပြီး အင်ဂျင်နီယာ အရွယ်အစား လျှော့မှု ကို ပိတ်ပင်ပါသည်：

ဌာန

textarea {
  resize: none;
}

亲自试一试

စီတီစား အပြွက် ပြောင်းလဲ

outline-offset အချက်အလက် အကွယ်အဖက် နှင့် အစိတ်အခံ အဖက်အနီး အကြား အရွားအမြစ် ပြုလုပ်ပါသည်。

အခြေအနေ အကွယ်အဖက် အဖက်အနီး အတွင်း 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;
}

亲自试一试

CSS 用户界面属性

下表列出了所有用户界面属性：

属性 描述
outline-offset 在轮廓和元素的边框边缘之间添加空间。
resize 规定元素是否可由用户调整大小。