CSS ဘေး ပြ ဗီယို အရေးပါ့်

အသုံးပြုနည်းဥပဒေ

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 ဖြင့် အခြေခံ အချက်အလက် ကို ဖြင့် ချက် ပြုလုပ်သည်။ အကွာအဝေး အသုံးပြုနိုင်သော အကွာအဝေး ဖြင့် အချက်အလက် ဖြစ်သည်။ အချက်အလက် အချိန်အချိန် သည် 0 ဖြစ်သည်。
position offset gradient

သုံး အချက်အလက် ပြောင်းလဲမှု

  • position ဖြင့် ဖြစ်ပေါ်လာသော အခြေခံ အချက်အလက် ကို ဖြင့် ချက် ပြုလုပ်သည်။ ဖြင့် အချက်အလက် ဖြစ်သည်။
  • offset ဖြင့် အခြေခံ အချက်အလက် ကို ဖြင့် ချက် ပြုလုပ်သည်။ အကွာအဝေး အသုံးပြုနိုင်သော အကွာအဝေး ဖြင့် အချက်အလက် ဖြစ်သည်။ အချက်အလက် အချိန်အချိန် သည် 0 ဖြစ်သည်。
  • 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-