drop-shadow function

drop-shadow function သည် background image တစ်ခုသို့ အရိပ်တစ်ခု ထည့်သွင်းနိုင်စေပါသည်။

Syntax

cssselector {
  filter: drop-shadow(x-offset, y-offset, blur-radius, color);
}

Values

Value	Description
x-offset	နောက်ခံအပေါ်မှ အရိပ်၏အလျားလိုက် ရွှေ့ခြင်း။ အပေါင်းကိန်းသည် အရိပ်ကို ညာဘက်သို့ ရွှေ့ကြောင်း ဖော်ပြသည်။ အနုတ်ကိန်းသည် ဘယ်ဘက်သို့ ရွှေ့ကြောင်း ဖော်ပြသည်။ မဖြစ်မနေထည့်ရမည့် parameter ဖြစ်သည်။
y-offset	နောက်ခံအပေါ်မှ အရိပ်၏ ဒေါင်လိုက် ရွှေ့ခြင်း။ အပေါင်းကိန်းသည် အရိပ်ကို အောက်ဘက်သို့ ရွှေ့ကြောင်း ဖော်ပြသည်။ အနုတ်ကိန်းသည် အပေါ်ဘက်သို့ ရွှေ့ကြောင်း ဖော်ပြသည်။ မဖြစ်မနေထည့်ရမည့် parameter ဖြစ်သည်။
blur-radius	အရိပ်၏ blur radius ကို သတ်မှတ်ပေးသည်။ တန်ဖိုးကြီးလေလေ အရိပ်သည် ပို၍ blur ဖြစ်လေလေ ဖြစ်သည်။ ထည့်ရန် မလိုအပ်သော parameter ဖြစ်သည်။ Default အားဖြင့် `0` နှင့် ညီမျှသည်။
color	အရိပ်၏ အရောင်။ ထည့်ရန် မလိုအပ်သော parameter ဖြစ်သည်။ Default အားဖြင့် အရိပ်၏ အမည်းရောင်ကို သတ်မှတ်ပေးထားသည်။

Example

ကျွန်ုပ်တို့၏ image အတွက် အဝါရောင်အရိပ်ကို ဝင်ရိုးများတလျှောက် ရွှေ့ခြင်းမရှိဘဲ၊ blur 5px ဖြင့် သတ်မှတ်ကြပါစို့။

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

css#elem {
  filter: drop-shadow(0 0 5px #035470);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

drop-shadow function

Syntax

Values

Example

See also