CSS အကြမ်းဖျင်း
ကောက်ကြောင်းတစ်ခုသည် ဒြပ်စင်၏ဘောင်အပြင်ဘက်တွင် ရေးဆွဲထားသောမျဉ်းတစ်ခုဖြစ်သည်။
CSS အကြမ်းဖျင်း
ကောက်ကြောင်းတစ်ခုသည် ဒြပ်စင်များကို "ထင်ရှားပေါ်လွင်စေရန်" နယ်နိမိတ်အပြင်ဘက်တွင် ရေးဆွဲထားသောမျဉ်းတစ်ခုဖြစ်သည်။
CSS တွင် အောက်ပါ အကြမ်းဖျင်း ဂုဏ်သတ္တိများ ရှိသည်။
-
outline-style
-
outline-color
-
outline-width
-
outline-offset
-
outline
မှတ်ချက်- ကောက်ကြောင်းသည် နယ်နိမိတ်များ နှင့် ကွဲပြားသည် ။ ဘောင်နှင့်မတူဘဲ၊ ကောက်ကြောင်းကို ဒြပ်စင်၏ဘောင်အပြင်ဘက်တွင် ဆွဲထားပြီး အခြားအကြောင်းအရာကို ထပ်နေနိုင်သည်။ ထို့အပြင်၊ ကောက်ကြောင်းသည် ဒြပ်စင်၏အတိုင်းအတာ၏ အစိတ်အပိုင်းတစ်ခုမဟုတ်ပါ။ ဒြပ်စင်၏ စုစုပေါင်း အကျယ်နှင့် အမြင့်သည် ကောက်ကြောင်း၏ အကျယ်အားဖြင့် သက်ရောက်မှုမရှိပါ။
CSS Outline ပုံစံ
ပိုင်ဆိုင်မှုသည် ကောက်ကြောင်း ၏ outline-style
ပုံစံကို သတ်မှတ်ပေးကာ အောက်ပါတန်ဖိုးများထဲမှ တစ်ခု ဖြစ်နိုင်သည်-
dotted
- အစက်ချထားသော အကွက်ကို သတ်မှတ်သည်။dashed
- ဒက်ရှ်ကောက်ကြောင်းကို သတ်မှတ်သည်။solid
- ခိုင်မာသောကောက်ကြောင်းကိုသတ်မှတ်သည်။double
- နှစ်ထပ်ကောက်ကြောင်းကို သတ်မှတ်သည်။groove
- Defines a 3D grooved outlineridge
- Defines a 3D ridged outlineinset
- Defines a 3D inset outlineoutset
- Defines a 3D outset outlinenone
- Defines no outlinehidden
- Defines a hidden outline
The following example shows the different outline-style
values:
Example
Demonstration of the different outline styles:
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;}
Result:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Note: None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the
outline-style
property is set!