drop-shadow function
drop-shadow function သည်
background image တစ်ခုသို့ အရိပ်တစ်ခု
ထည့်သွင်းနိုင်စေပါသည်။
Syntax
selector {
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 ဖြင့် သတ်မှတ်ကြပါစို့။
<div id="elem"></div>
#elem {
filter: drop-shadow(0 0 5px #035470);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
See also
-
blurfunction,
သည် နောက်ခံကို blur လုပ်ပေးသည် -
brightnessfunction,
သည် နောက်ခံ၏ တောက်ပမှုကို သတ်မှတ်ပေးသည် -
contrastfunction,
သည် နောက်ခံ၏ ခြားနားမှုကို သတ်မှတ်ပေးသည် -
hue-rotatefunction,
သည် နောက်ခံ၏ အရောင်သွင်ပြင်ကို သတ်မှတ်ပေးသည် -
invertfunction,
သည် နောက်ခံအရောင်များကို ပြောင်းပြန်လှန်ပေးသည် -
opacityfunction,
သည် နောက်ခံ၏ အလင်းပေါက်မှုကို သတ်မှတ်ပေးသည် -
sepiafunction,
သည် နောက်ခံကို sepia သို့ ပြောင်းလဲပေးသည် -
backgroundproperty,
သည် နောက်ခံအတွက် အတိုကောက် property ဖြစ်သည် -
background-imageproperty,
အသုံးပြု၍ block တစ်ခုအား background image သတ်မှတ်နိုင်သည်