ລະບົບ CSS box-reflect

ການກໍານົດແລະການນໍາໃຊ້

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;

ຈຳນວນຊັ້ນດັງຂອງປະສົມປະສານ

ຂໍ້ມູນດ້ານເຕັກນິກ

ການສະໜັບສະໜູນບັນດາຊົນວຽງ

ຈຳນວນໃນຕາລະບັນຈະສະແດງສະບັບທີ່ສະໜັບສະໜູນປະສົມປະສານທີ່ສະໜູນຄັບຄຸນນີ້ທຳອິດ.

ຈຳນວນທີ່ກ່ຽວກັບ -webkit- ແມ່ນສະບັບທີ່ສະໜັບສະໜູນຄັບຄຸນນີ້ທຳອິດ.