စတုံးစံ အသုံးပြုသူ အကွက်

စတုံးစံ အသုံးပြုသူ အကွက်

在本章中，您将学到以下 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 属性规定元素是否应（以及如何）被用户调整大小。

ဒါမှာ div အရာဝတ္တု သည် အသုံးပြုသူ က အရွယ်အစား ပြင်းထန်ကြောင်း အခြေခံအားဖြင့် ပြုလုပ်နိုင်ပါသည်!

အရွယ်အစား ပြင်းထန်ခြင်း: ဒါမှာ div အရာဝတ္တု အခြေအနေ အောက်တွင် အကြိမ်ကြိမ် ချွတ်လုပ်ပြီး အရွယ်အစား ပြင်းထန်ကြောင်း ပြုလုပ်ပါ။

သတိပြုရမည်: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;
}

亲自试一试

CSS အဆိုပါ ပြောင်းလဲ

outline-offset သုံးစွဲမှု သည် အသွင်တူကြောင်း နှင့် အရာဝတ္တု အဖက်အဖျား အကြာ ပြုလုပ်သည်。

ဒါမှာ div အဖက်အဖျား အောက်တွင် ၁၅ပမာဏ အသွင်တူကြောင်း ရှိပါသည်。

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

အောက်ပါ အကျိုးသတ်မှတ် အသုံးပြုသည် 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 အကွက် အသုံးပြုသူ အသုံးပြုနိုင်ခြင်း အချက်ပြု