CSS Box Shadow

ປະສົມເປັນອຸປະກອນ box-shadow CSS

CSS box-shadow ຄວາມປະສົງຂອງການນຳໃຊ້ສະພາບຕາມຄວາມສະພາບຂອງບັນດາສິ່ງ.

ການນໍາໃຊ້ທີ່ຫຼາຍທີ່ສຸດແມ່ນພຽງແຕ່ກຳນົດຄວາມຫຼາຍທາງສະພາບຕາມຊັ້ນສູງ ແລະ ທາງສະພາບຕາມຊັ້ນມວນອອກ:

ພາຍຫົວ <div> ສີຂຽວຫົວຫຼັງ, ມີ box-shadow ສີດຳ

实例

div {
  box-shadow: 10px 10px;
}

ທ່ານຈະສວດສະບາຍດຽວກັນ:

ຫຼັງຈາກນັ້ນ, ສົ່ງຜົນກະທົບກັບສີ:

ພາຍຫົວ <div> ສີຂຽວຫົວຫຼັງ, ມີ box-shadow ສີຂຽວ

实例

div {
  box-shadow: 10px 10px grey;
}

ທ່ານຈະສວດສະບາຍດຽວກັນ:

ຫຼັງຈາກນັ້ນ, ສົ່ງຜົນກະທົບກັບການບໍ່ຊັນຊ້ອນ:

ພາຍຫົວ <div> ສີຂຽວຫົວຫຼັງ, ມີ box-shadow ທີ່ບໍ່ຊັນຊ້ອນ

实例

div {
  box-shadow: 10px 10px 5px grey;
}

ທ່ານຈະສວດສະບາຍດຽວກັນ:

ຄະແນນ

ທ່ານຍັງສາມາດໃຊ້: box-shadow ຄວາມປະສົງຂອງການສ້າງຄະແນນຕອນເຈັບ:

1
January 1, 2021
Coffee
Coffee

实例

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

亲自试一试：纸卡片亲自试一试：图像卡片

CSS 阴影属性

下表列出了 CSS 的阴影属性：

属性 描述
box-shadow 向一个元素添加一个或多个阴影。
text-shadow 在文本中添加一个或多个阴影。