CSS box-shadow Property
ဥပမာ
မတူညီသော <div> ဒြပ်စင်များသို့ အရိပ်များထည့်ပါ-
#example1 {
box-shadow: 5px 10px;
}
#example2 {
box-shadow:
5px 10px #888888;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပစ္စည်း box-shadow
သည် ဒြပ်စင်တစ်ခုသို့ တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော အရိပ်များကို ပူးတွဲထားသည်။
မူလတန်ဖိုး: | မရှိ |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | ဟုတ်တယ် ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.boxShadow="10px 20px 30px အပြာရောင်" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
-webkit- သို့မဟုတ် -moz- ဖြင့်လိုက်သောနံပါတ်များကို ရှေ့ဆက်တွဲဖြင့်လုပ်ဆောင်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပါ။
Property | |||||
---|---|---|---|---|---|
box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS Syntax
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
မှတ်ချက်- ဒြပ်စင်တစ်ခုသို့ အရိပ်တစ်ခုထက်ပို၍ ပူးတွဲရန်၊ ကော်မာခွဲထားသော အရိပ်များစာရင်းကို ထည့်ပါ (အောက်ပါ "သင်ကိုယ်တိုင်စမ်းကြည့်ပါ" ဥပမာကို ကြည့်ပါ)။
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Play it |
---|---|---|
none | Default value. No shadow is displayed | |
h-offset | Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box | |
v-offset | Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box | |
blur | Optional. The blur radius. The higher the number, the more blurred the shadow will be | |
spread | Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow | |
color | Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. |
|
inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
အကြံပြုချက်- ခွင့်ပြုထားသောတန်ဖိုးများ (CSS အရှည်ယူနစ်များ) အကြောင်း ပိုမိုဖတ်ရှုပါ။
နောက်ထပ် ဥပမာများ
ဥပမာ
အရိပ်သို့ မှုန်ဝါးသောအကျိုးသက်ရောက်မှုကို ထည့်ပါ-
#example1 {
box-shadow: 10px 10px 8px #888888;
}
ဥပမာ
အရိပ်၏ အချင်းဝက်ကို သတ်မှတ်ပါ-
#example1 {
box-shadow: 10px 10px 8px 10px #888888;
}
ဥပမာ
အရိပ်များစွာကို သတ်မှတ်ပါ-
#example1 {
box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}
ဥပမာ
ထည့်သွင်းသောသော့ချက်စာလုံးကို ထည့်ပါ-
#example1 {
box-shadow: 5px 10px inset;
}
ဥပမာ
စားပွဲပေါ်တင်ထားသောပုံများ။ ဤဥပမာသည် "polaroid" ပုံများကိုဖန်တီးပြီး ပုံများကိုလှည့်နည်းကို သရုပ်ပြသည်-
div.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid
#BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Box Shadow
HTML DOM ရည်ညွှန်းချက်- boxShadow ပိုင်ဆိုင်မှု