CSS Box Shadow

CSS คุณสมบัติ box-shadow

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
โคฟฟี
โคฟฟี

ตัวอย่าง

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 เพิ่มเงาหนึ่งหรือหลายเงาในข้อความ