CSS Image Reflection
ဤအခန်းတွင် ပုံတစ်ပုံကို ရောင်ပြန်ဟပ်နည်းကို လေ့လာပါမည်။
CSS Image Reflections
ပုံသဏ္ဌာန် box-reflect
ကို ရောင်ပြန်ဟပ်မှု ဖန်တီးရန် ပိုင်ဆိုင်မှုကို အသုံးပြုသည်။
ပစ္စည်း ၏တန်ဖိုးသည် box-reflect
- below
, above
,
left
, သို့မဟုတ် right
.
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
နံပါတ်များ -webkit- နောက်တွင် ရှေ့ဆက်တွဲဖြင့် လုပ်ဆောင်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပါ။
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
ဥပမာများ
ဥပမာ
ဤနေရာတွင် ကျွန်ုပ်တို့သည် ပုံအောက်တွင် ရောင်ပြန်ဟပ်မှုကို လိုချင်ပါသည်။
img {
-webkit-box-reflect: below;
}
ဥပမာ
ဤနေရာတွင် ကျွန်ုပ်တို့သည် ပုံ၏ညာဘက်တွင် ရောင်ပြန်ဟပ်မှုကို လိုချင်ပါသည်။
img {
-webkit-box-reflect: right;
}
CSS Reflection Offset
ပုံနှင့် ရောင်ပြန်ဟပ်မှုကြား ကွာဟချက်ကို သတ်မှတ်ရန်၊ ကွာဟချက်၏ အရွယ်အစားကို box-reflect
ပိုင်ဆိုင်မှုတွင် ထည့်ပါ။
ဥပမာ
ဤနေရာတွင် ကျွန်ုပ်တို့သည် 20px အော့ဖ်ဆက်ဖြင့် ပုံအောက်တွင် ရောင်ပြန်ဟပ်မှုကို လိုချင်ပါသည်-
img {
-webkit-box-reflect: below 20px;
}
Gradient ဖြင့် CSS Reflection
ရောင်ပြန်ဟပ်မှုအပေါ် မှိန်ဖျော့သောအကျိုးသက်ရောက်မှုကိုလည်း ဖန်တီးနိုင်သည်။
ဥပမာ
ရောင်ပြန်ဟပ်မှုအပေါ် မှိန်ဖျော့သောအကျိုးသက်ရောက်မှုကို ဖန်တီးပါ-
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}