box-shadow property

box-shadow property သည် ဘလောက်တစ်ခုအတွက် အရိပ်သတ်မှတ်ပေးသည်။ တန်ဖိုးအဖြစ် property သည် 6 ပါရာမီတာများကို လက်ခံပြီး ၎င်းတို့ကို အကွက်လွတ်ဖြင့် ပိုင်းခြားဖော်ပြရသည်၊ သို့မဟုတ် none အဓိပ္ပာယ်ဖွင့်စကားလုံးကို လက်ခံပြီး အရိပ်ကို လုံးဝဖျက်သိမ်းသည်။

Syntax

cssselector {
  box-shadow: inset x_shift y_shift blur shadow_size color;
}

cssselector {
  box-shadow: none;
}

ပါရာမီတာများ

ပါရာမီတာ	ရှင်းလင်းချက်
`inset`	Optional parameter။ သတ်မှတ်ထားပါက အရိပ်သည် container အတွင်းတွင် ရှိမည်၊ မသတ်မှတ်ပါက အပြင်ဘက်တွင် ရှိမည်။
x ဝင်ရိုးအပေါ် ရွေ့ပြောင်းမှု	X ဝင်ရိုးအပေါ် အရိပ်၏ ရွေ့လျားမှုကို သတ်မှတ်ပေးသည်။ အပြုသဘောတန်ဖိုးသည် ညာဘက်သို့ ရွေ့စေပြီး၊ အပျက်သဘောတန်ဖိုးသည် ဘယ်ဘက်သို့ ရွေ့စေသည်။
y ဝင်ရိုးအပေါ် ရွေ့ပြောင်းမှု	Y ဝင်ရိုးအပေါ် အရိပ်၏ ရွေ့လျားမှုကို သတ်မှတ်ပေးသည်။ အပြုသဘောတန်ဖိုးသည် အောက်သို့ ရွေ့စေပြီး၊ အပျက်သဘောတန်ဖိုးသည် အပေါ်သို့ ရွေ့စေသည်။
မှုန်ဝါးမှု	အရိပ်၏ မှုန်ဝါးမှုကို သတ်မှတ်ပေးသည်။ တန်ဖိုးကြီးလေလေ အရိပ်သည် ပို၍ မှုန်ဝါးလေလေ ဖြစ်မည်။ Optional parameter။ မသတ်မှတ်ပါက အရိပ်သည် ချောမွေ့နေမည်။
အရိပ်၏ အရွယ်အစား	အရိပ်၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်။ အပြုသဘောတန်ဖိုးသည် အရိပ်ကို ဆွဲဆန့်စေပြီး၊ အပျက်သဘောတန်ဖိုးသည်၊ ဆန့်ကျင်ဘက်အနေဖြင့် ၎င်းကို ကျုံ့သွားစေသည်။ Optional parameter။ မသတ်မှတ်ပါက အရိပ်သည် element နှင့် အရွယ်အစားတူညီမည်။
အရောင်	မည်သည့် အရောင်အတွက် ယူနစ်များဖြင့်မဆို အရိပ်၏ အရောင်ကို သတ်မှတ်ပေးသည်။ Optional parameter။ မသတ်မှတ်ပါက အရိပ်၏ အရောင်သည် စာသား၏ အရောင်နှင့် တူညီမည်။

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

ဥပမာ

ဤဥပမာတွင် အရိပ်ကို အောက်ဘက်နှင့် ညာဘက်သို့ ရွေ့ထားပြီး မှုန်ဝါးမှု အနည်းငယ် ထည့်သွင်းထားသည်။

html<div id="elem"></div>

css#elem {
  box-shadow: 5px 5px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

ဥပမာ ။ ချောမွေ့သော အရိပ်

ဤဥပမာတွင် အရိပ်ကို အောက်ဘက်နှင့် ညာဘက်သို့ ရွေ့ထားပြီး၊ သို့သော် မှုန်ဝါးမှု မရှိပါ (အရိပ်သည် ချောမွေ့နေမည်)။

html<div id="elem"></div>

css#elem {
  box-shadow: 2px 2px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

ဥပမာ ။ တစ်သမတ်တည်းသော အရိပ်

ဤဥပမာတွင် အရိပ်ကို မရွေ့ထားပါ၊ သို့သော် ၎င်းတွင် မှုန်ဝါးမှု ထည့်သွင်းထားသည်။

html<div id="elem"></div>

css#elem {
  box-shadow: 0px 0px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

ဥပမာ ။ အရိပ်၏ အရွယ်အစား

ဤဥပမာတွင် အရိပ်ကို မရွေ့ထားပါ၊ မှုန်ဝါးမှု သုညနှင့် ညီမျှသည်၊ သို့သော် ၎င်းတွင် အရွယ်အစား (အနက်ရောင် သည် နယ်နိမိတ်ဖြစ်ပြီး၊ အနီရောင် သည် အရိပ်ဖြစ်သည်) ထည့်သွင်းထားသည်။

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 0 3px red;
  border: 3px solid black;
  width: 300px;
  height: 50px;
}

Результат:

ဥပမာ ။ မှုန်ဝါးမှု + အရိပ်၏ အရွယ်အစား

ဤဥပမာတွင် အရိပ်ကို မရွေ့ထားပါ၊ သို့သော် ၎င်းတွင် မှုန်ဝါးမှုနှင့် အရွယ်အစား (အနက်ရောင် သည် နယ်နိမိတ်ဖြစ်ပြီး၊ အနီရောင် သည် အရိပ်ဖြစ်သည်) ထည့်သွင်းထားသည်။

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 3px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

ဥပမာ ။ အတွင်းပိုင်း အရိပ်

ဤဥပမာတွင် အရိပ်သည် container အတွင်းတွင် တည်ရှိသည်။

html<div id="elem"></div>

css#elem {
  box-shadow: inset 0 0 6px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

ဆက်လက် ကြည့်ရှုရန်

text-shadow property,
အရိပ်ကို စာသားအတွက် သတ်မှတ်ပေးသည်