ການສະເຫມີດ

ການນຳໃຊ້ຫົວຂໍ້ CSS drop-shadow()

ການອະທິບາຍແລະການນຳໃຊ້ CSS drop-shadow()

ການນຳໃຊ້ຫົວຂໍ້ບັນຊີ filter drop-shadow()

ຄວາມສຳຄັນ

ຄວາມສຳຄັນ 1

ການເພີ່ມສີກັບການຫຼອກຫຼວງທີ່ຫຼາຍກວ່າ (ທີ່ໃຊ້ຈຳນວນທີ່ມີຈຳນວນທີ່ສູງ):
  ການເພີ່ມສີກັບການຫຼອກຫຼວງທີ່ຫຼາຍກວ່າ:
filter: drop-shadow(-10px -10px 7px lightblue);
filter: drop-shadow(-8px -8px 10px gray);
  filter: drop-shadow(8px 8px 10px gray);
filter: drop-shadow(-10px -10px 7px lightblue);

}

filter: drop-shadow(10px 10px 7px lightblue);

ຄວາມສຳຄັນ 2

ການເພີ່ມສີກັບການຫຼອກຫຼວງທີ່ຫຼາຍກວ່າ (ທີ່ໃຊ້ຈຳນວນທີ່ມີຈຳນວນທີ່ສູງ):
  #img1 {
filter: drop-shadow(-10px -10px 7px lightblue);
filter: drop-shadow(-8px -8px 10px gray);
  #img2 {
filter: drop-shadow(-10px -10px 7px lightblue);

}

ດຳເນີນການທົດລອງດັ່ງກ່າວ

ການນຳໃຊ້ຫົວຂໍ້ CSSການອະທິບາຍ v-shadow blur spread colordrop-shadow(
) ຈຳນວນທີ່ມີຈຳນວນທີ່ສູງ
ການອະທິບາຍ

h-shadow

ຈຳນວນທີ່ມີຈຳນວນທີ່ສູງຈະເຮັດໃຫ້ສີຈະຢູ່ເທິງຫົວຂໍ້ພາບ.

v-shadow

ສະເພາະ.

ຈຳນວນທີ່ມີຈຳນວນທີ່ສູງຈະເຮັດໃຫ້ສີຈະຢູ່ເທິງຫົວຂໍ້ພາບ.

blur

ສາມາດເລືອກຢູ່.

ຈຳນວນທີ່ຫຼາຍຈະເຮັດໃຫ້ການຫຼອກຫຼວງຫຼາຍກວ່າ (ສີຈະກະຈາຍຫຼາຍແລະຫຼາຍກວ່າ).

ບໍ່ອະນຸຍາດທີ່ຈະໃຊ້ຄວາມສຳຄັນທີ່ມີຈຳນວນທີ່ສູງ.

ຖ້າບໍ່ມີການບັງຄັບໄດ້ ຈະເປັນຄວາມສຳຄັນ 0 (ການຂັບເຂົ້າຂອງສີກັບຂະໜາດສິ່ງ).

spread

ສາມາດເລືອກຢູ່.

ຄວາມສຳຄັນທີ່ເປັນຈຳນວນທີ່ສູງຈະເຮັດໃຫ້ສີກັບຂະໜາດຂະໜາດຂອງສິ່ງ (ກັບການກະຈາຍສີທີ່ຫຼາຍ).

ຖ້າບໍ່ມີການບັງຄັບໄດ້ ຈະເປັນຄວາມສຳຄັນ 0 (ສີກັບຂະໜາດສິ່ງ).

color

ສາມາດເລືອກຢູ່.

ຖ້າບໍ່ມີການບັງຄັບໄດ້ ສີຈະຕັດສິນວ່າບັນຊີບັນນາທິການ (ປົກກະຕິແມ່ນສີດຳ).

ລາຍລະອຽດເຕັກນິກ

ສະບັບ: CSS Filter Effects Module Level 1

ການສະໜັບສະໜູນບັນຊີບັນນາທິການ

ຈຳນວນບັນທຶງໃນຕາລະບົບບັນຊີແມ່ນສະບັບບັນຊີທຳອິດທີ່ສະໜັບສະໜູນການນຳໃຊ້ຫົວຂໍ້ນັ້ນ.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

ຫົວຂໍ້ບັນຫາທີ່ກ່ຽວຂ້ອງ

参考:ປະເພດ CSS filter

参考:ການນຳໃຊ້ຫົວຂໍ້ CSS blur()

参考:ການນຳໃຊ້ຫົວຂໍ້ CSS brightness()

参考:ການນຳໃຊ້ຫົວຂໍ້ CSS contrast()

参考:ການນຳໃຊ້ຫົວຂໍ້ CSS grayscale()

参考:ການນຳໃຊ້ຫົວຂໍ້ CSS hue-rotate()

参考:ການນຳໃຊ້ຫົວຂໍ້ CSS invert()

参考:ການນຳໃຊ້ຫົວຂໍ້ CSS opacity()

参考:CSS saturate() 函数

参考:CSS sepia() 函数