ฟังก์ชัน drop-shadow() ของ CSS

การกำหนดและการใช้งาน

CSS drop-shadow() ฟังก์ชันฟิลเตอร์ใช้ประกาศภาพร้ายสำหรับองค์ประกอบ

เพิ่มภาพแสดงให้มีภาพร้ายที่ต่างกัน

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

เพิ่มภาพแสดงให้มีภาพร้ายที่ต่างกัน (ใช้ค่าลบสำหรับเงานอนที่ตั้งต่อแนวนอนและตั้งต่อแนวตะวันออก)

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

ค่า	คำอธิบาย
h-shadow	จำเป็น ค่าลบจะจัดเงาอยู่ด้านซ้ายของภาพ
v-shadow	จำเป็น ค่าลบจะจัดเงาอยู่ด้านบนของภาพ
blur	ใช้ได้เลือก ค่าที่ใหญ่ขึ้น ความสว่างของกระแสเงาจะแข็งขึ้น (เงาจะใหญ่ขึ้นและอ่อนลง) ไม่อนุญาตให้ใช้ค่าลบ ถ้าไม่ได้ระบุค่า จะเป็นเริ่มต้นที่ 0 (ขอบเงาชัดเจน)
spread	ใช้ได้เลือก ค่าบวกจะทำให้เงาขยายตัวและใหญ่ขึ้น ในขณะที่ค่าลบจะทำให้เงาเล็กลง ถ้าไม่ได้ระบุ จะเป็นเริ่มต้นที่ 0 (เงาเท่ากับขนาดขององค์ประกอบ)
color	ใช้ได้เลือก ถ้าไม่ได้ระบุ สีขึ้นอยู่กับบราวเซอร์ (ส่วนใหญ่เป็นสีดำ)