CSS စာပေးချက် အကွာ

အရွယ်အစား 10px ဖြင့် အရုပ် အရင်း အဖက်အသွယ် နှင့် အပေါ်ပုံ အဖက်အသွယ် အတိုင်း ဖြစ်သည်။

CSS စာပေးချက် အကွာ

အဖက်အသွယ် ကို အရွယ်အစား အောက်ပါ အဖက်အသွယ် အတွင်း ဖြင့် ဖော်ပြခြင်း ဖြစ် ပြီး အဖက်အသွယ် အောက်ပါ ဖြင့် အရွယ်အစား အတွင်း ဖြင့် ဖော်ပြခြင်း ဖြစ် ပြီး အရွယ်အစား အတွင်း အဖက်အသွယ် ကို ပြောင်းလဲပါ:

CSS တွင် အဖက်အသွယ် အချက်အလက်များ:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

注意：အဖက်အသွယ် နှင့်အဖက်အသွယ်မတူညီ! အမျိုးမျိုး ဖြစ်သည့်: အဖက်အသွယ် ကို အရွယ်အစား အောက်ပါ အဖက်အသွယ် အတွင်း ဖြင့် ဖော်ပြခြင်း ဖြစ် ပြီး အခြား အသုံးချခြင်း နှင့် ယူးနှင့် ပေါင်းဆွေးနွေး ပါသည်။ လည်းပင် အဖက်အသွယ် ကို အရွယ်အစား အတွင်း အပါဝင် မဟုတ်; အရွယ်အစား အပိုင်း အဖက်အသွယ် အောက်ပါ အကွင်းသို့ ပြောင်းလဲပါ:

CSS အဖက်အသွယ် ဖော်ပြခြင်း

outline-style အရိယာ အဖက်အသွယ် ကို ဖော်ပြခြင်း ဖြင့် အတိုင်းအတာ ဖြင့် အစီအစဥ် ပြုပါ:

  • dotted - အနောက်ပုံ အဖက်အသွယ် ကို ဖော်ပြခြင်း:
  • dashed - အောက်ပုံ အဖက်အသွယ် ကို ဖော်ပြခြင်း:
  • solid - အပေါ်ပုံ အဖက်အသွယ် ကို ဖော်ပြခြင်း:
  • double - နှစ်လက်ဖက် အဖက်အသွယ် ကို ဖော်ပြခြင်း:
  • groove - 3D အောက်ပုံ အဖက်အသွယ် ကို ဖော်ပြခြင်း:
  • ridge - 3D အပေါ်ပုံ အဖက်အသွယ် ကို ဖော်ပြခြင်း:
  • inset - 3D အောက်ပုံ အ�က်အသွယ် ကို ဖော်ပြခြင်း:
  • outset - 3D အပေါ်ပုံ အဖက်အသွယ် ကို ဖော်ပြခြင်း:
  • none - အဖက်အသွယ် ကို အပျက်အစီး မပြောင်းလဲခဲ့ပါ:
  • hidden - အဖက်အသွယ် ကို အကွင်းသို့ ချင်းချင်း မပြောင်းလဲခဲ့ပါ:

အောက်ပါအရ အဖက်အသွယ်-outline-style အတိုင်းအတာများ ဖော်ပြခြင်း:

အမှတ်ပေး

ပြောင်းလဲသော အဖက်အသွယ် ဖော်ပြခြင်း:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

结果：

点状轮廓。

虚线轮廓。

实线轮廓。

双线轮廓。

3D 凹槽轮廓。此效果取决于 outline-color 值。

3D 凸槽轮廓。此效果取决于 outline-color 值。

3D 凹边轮廓。此效果取决于 outline-color 值。

3D 凸边轮廓。此效果取决于 outline-color 值。

亲自试一试

注意：除非设置了 outline-style 属性，否则其他轮廓属性（在下一章中将详细介绍）都不会有任何作用！