ฟังก์ชัน drop-shadow

ฟังก์ชัน drop-shadow ช่วยให้ เพิ่มเงาลงในรูปภาพพื้นหลัง

ไวยากรณ์

cssselector {
  filter: drop-shadow(shift x, shift y, blur radius, color);
}

ค่า

ค่า	คำอธิบาย
shift x	การเลื่อนเงาในแนวนอนเมื่อเทียบกับพื้นหลัง ตัวเลขบวกหมายถึงการเลื่อนเงาไปทางขวา ตัวเลขลบ - ไปทางซ้าย เป็นพารามิเตอร์บังคับ
shift y	การเลื่อนเงาในแนวตั้งเมื่อเทียบกับพื้นหลัง ตัวเลขบวกหมายถึงการเลื่อนเงาลงด้านล่าง ตัวเลขลบ - ขึ้นด้านบน เป็นพารามิเตอร์บังคับ
blur	กำหนดรัศมีของการเบลอของเงา ยิ่งค่ามากเท่าไหร่ เงาก็จะยิ่งเบลอมากขึ้นเท่านั้น พารามิเตอร์ทางเลือก ค่าเริ่มต้น คือ `0`
color	สีของเงา พารามิเตอร์ทางเลือก ค่าเริ่มต้น คือสีดำ

ตัวอย่าง

ลองกำหนดเงาสีฟ้าให้กับรูปภาพของเรา โดยไม่มีการเลื่อนตามแกน พร้อมกับเบลอ 5px:

html<div id="elem"></div>

css#elem {
  filter: drop-shadow(0 0 5px #035470);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ดูเพิ่มเติม

ฟังก์ชัน blur,
ซึ่งทำการเบลอพื้นหลัง
ฟังก์ชัน brightness,
ซึ่งกำหนดความสว่างให้กับพื้นหลัง
ฟังก์ชัน contrast,
ซึ่งกำหนดความเปรียบต่างให้กับพื้นหลัง
ฟังก์ชัน hue-rotate,
ซึ่งกำหนดสีให้กับพื้นหลัง
ฟังก์ชัน invert,
ซึ่งกลับสีของพื้นหลัง
ฟังก์ชัน opacity,
ซึ่งกำหนดความโปร่งใสให้กับพื้นหลัง
ฟังก์ชัน sepia,
ซึ่งแปลงพื้นหลังเป็นสีซีเปีย
คุณสมบัติ background,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับพื้นหลัง
คุณสมบัติ background-image,
ซึ่งใช้กำหนดรูปภาพพื้นหลังให้กับบล็อก