CSS ဘေး ပြ ဗီယို အရေးပါ့်
- 上一页 box-decoration-break
- 下一页 box-shadow
အသုံးပြုနည်းဥပဒေ
box-reflect
အခြေခံ အကျုံး အသုံးပြုသည်
box-reflect
အကျုံး အမှတ် ဖြစ်နိုင်သည်
below
ဘယ်ဘက်above
ဘယ်ဘက်left
ဘယ်ဘက်right
ဘယ်ဖက်
အဆိုပါbox-reflect
အခြေခံ အကျုံး ဖြစ်သည်၊ အသုံးပြုရမည် -webkit-
ပြင်ပ်
အမှတ်
例子 1
在图片下方添加反射效果:
img { -webkit-box-reflect: below; }
例子 2
box-reflect
属性可以应用于任何可见的 HTML 元素。下例在
标签下方创建反射效果:
p { -webkit-box-reflect: below; }
例子 3
box-reflect
属性可以使用双值语法。下例在图片下方创建反射效果,并设置 70px 的距离:
img { -webkit-box-reflect: below 70px; }
例子 4
box-reflect
属性还可以使用三值语法。下例在图片下方创建反射效果,设置 10px 的距离,并逐渐淡出:
img { -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4)); }
CSS ပြောင်းလဲမှု
box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;
အချက်အလက် အကိုးအကို
အချက်အလက် | ဖော်ပြ |
---|---|
none | မပြုလုပ် |
below | အရာဝတ္တု အခြေခံ အရွယ်အစား အတွင်း ဖြင့် ဖြစ်ပေါ်လာသော လှည့်မှီး အချက်အလက် ကို ဖြင့် ချက် ပြုလုပ်သည်。 |
above | အရာဝတ္တု အခြေခံ အရွယ်အစား အတွင်း ဖြင့် ဖြစ်ပေါ်လာသော လှည့်မှီး အချက်အလက် ကို ဖြင့် ချက် ပြုလုပ်သည်。 |
left | အရာဝတ္တု အခြေခံ အရွယ်အစား အတွင်း ဖြင့် ဖြစ်ပေါ်လာသော လှည့်မှီး အချက်အလက် ကို ဖြင့် ချက် ပြုလုပ်သည်。 |
right | အရာဝတ္တု အခြေခံ အရွယ်အစား အတွင်း ဖြင့် ဖြစ်ပေါ်လာသော လှည့်မှီး အချက်အလက် ကို ဖြင့် ချက် ပြုလုပ်သည်。 |
position offset |
နှစ် အချက်အလက် ပြောင်းလဲမှု
|
position offset gradient |
သုံး အချက်အလက် ပြောင်းလဲမှု
|
initial | အချက်အလက် ကို မနှစ်ဆို ပြီး ကူးယူသည်。 initial. |
inherit | ဖြစ်ပေါ်လာသော အဖွဲ့အစည်း မှ အခြေခံ အချက်အလက် ကို ကူးယူသည်。 inherit. |
နည်းပညာ အချက်အလက်
မနှစ်ဆို | none |
---|---|
ကြိုးစားအား | မဆို |
လှည့်မှီး ပြုလုပ် | မမော်လမီ。လှည့်မှီး အချက်အလက်. |
ပုံစံ | CSS3 |
JavaScript ပြောင်းလဲမှု | object.style.webkitBoxReflect="below" |
ဘွတ်စစ် ထောက်ပံ့
တေးရာခုံးမှ နံပါတ်များ သည် အထူး ထောက်ပံ့သော ဘွတ်စစ် ပုံစံ အပြီးအပိုင်း ထောက်ပံ့သော ဘွတ်စစ် ပုံစံ အပြီးအပိုင်း ကို ကိုးကွယ်သည်。
နံပါတ် -webkit- ပြီး အထူး ကို ထောက်ပံ့သော ပုံစံတစ်ခု သည် အပြီးအပိုင်း ထောက်ပံ့သော ဘွတ်စစ် ပုံစံဖြစ်သည်。
ခလီ | အန်ဂျီ | ဖက်ဖ် | ဆော့ဖ်ဖ် | အိုပီယာ |
---|---|---|---|---|
4.0 -webkit- | 79.0 -webkit- | မမော်လမီ | 4.0 -webkit- | 15.0 -webkit- |
- 上一页 box-decoration-break
- 下一页 box-shadow