CSS Box Shadow
CSS box-shadow Property
box-shadow
ဒြပ်စင်တစ်ခုသို့ တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော အရိပ်များကို အသုံးချရန် CSS ပိုင်ဆိုင်မှုကို အသုံးပြုသည်။
အလျားလိုက်နှင့် ဒေါင်လိုက်အရိပ်ကို သတ်မှတ်ပါ။
၎င်း၏ အရိုးရှင်းဆုံးအသုံးပြုမှုတွင်၊ သင်သည် အလျားလိုက်နှင့် ဒေါင်လိုက်အရိပ်ကိုသာ သတ်မှတ်သည်။ အရိပ်၏ မူရင်းအရောင်သည် လက်ရှိ စာသားအရောင်ဖြစ်သည်။
ဥပမာ
အလျားလိုက်နှင့် ဒေါင်လိုက်အရိပ်ကို သတ်မှတ်ပါ-
div
{
box-shadow: 10px 10px;
}
အရိပ်အတွက် အရောင်တစ်ခု သတ်မှတ်ပါ။
ကန့ color
်သတ်ချက်သည် အရိပ်၏အရောင်ကို သတ်မှတ်သည်။
ဥပမာ
အရိပ်အတွက် အရောင်တစ်ခု သတ်မှတ်ပါ-
div
{
box-shadow: 10px 10px grey;
}
အရိပ်သို့ Blur Effect တစ်ခုထည့်ပါ။
ကန့ blur
်သတ်ချက်သည် မှုန်ဝါးသော အချင်းဝက်ကို သတ်မှတ်သည်။ အရေအတွက်များလေ၊ အရိပ်က ပို၍ မှုန်ဝါးလာလေဖြစ်သည်။
ဥပမာ
အရိပ်သို့ မှုန်ဝါးသောအကျိုးသက်ရောက်မှုကို ထည့်ပါ-
div
{
box-shadow: 10px 10px 5px grey;
}
Spread Radius of the Shadow ကို သတ်မှတ်ပါ။
က spread
န့်သတ်ချက်သည် ပျံ့နှံ့မှုအချင်းဝက်ကို သတ်မှတ်သည်။ အပြုသဘောတန်ဖိုးသည် အရိပ်၏အရွယ်အစားကိုတိုးစေပြီး၊ အနုတ်တန်ဖိုးသည် အရိပ်၏အရွယ်အစားကို လျော့နည်းစေသည်။
ဥပမာ
အရိပ်၏ အချင်းဝက်ကို သတ်မှတ်ပါ-
div
{
box-shadow: 10px 10px 5px 12px grey;
}
Inset Parameter ကို သတ်မှတ်ပါ။
ကန့် inset
သတ်ချက်သည် အရိပ်ကို အပြင်ဘက်အရိပ် (အစပိုင်း) မှ အတွင်းအရိပ်သို့ ပြောင်းလဲသည်။
ဥပမာ
ထည့်သွင်းမှုဘောင်ကို ထည့်ပါ-
div
{
box-shadow: 10px 10px 5px grey inset;
}
အရိပ်များစွာထည့်ပါ။
ဒြပ်စင်တစ်ခုတွင် အရိပ်များစွာလည်း ရှိနိုင်သည်-
ဥပမာ
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
ကတ်များ
box-shadow
စက္ကူနှင့်တူသောကတ်များဖန်တီးရန် ပိုင်ဆိုင်မှု ကိုလည်း သင်အသုံးပြုနိုင်သည် -
၁
ဇန်နဝါရီ ၁၊ ၂၀၂၁
Hardanger၊ နော်ဝေး
ဥပမာ
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
Property | Description |
---|---|
box-shadow | Adds one or more shadows to an element |
text-shadow | Adds one or more shadows to a text |