Question 1

CSS Box Shadow คืออะไร?

Accepted Answer

CSS Box Shadow คือ Property ในภาษา CSS ที่ใช้สำหรับใส่เอฟเฟกต์แรเงาให้กับกล่ององค์ประกอบ (Element) บนหน้าเว็บ ทำให้หน้าเว็บดูมีมิติ มีความลึก แยก Layer รูปร่างชัดเจนขึ้น และมีสไตล์ที่สมจริงยิ่งขึ้นตามหลัก Material/Modern UI Design

Question 2

พารามิเตอร์ของ Box Shadow มีอะไรบ้าง?

Accepted Answer

Box Shadow ประกอบด้วยค่าย่อยๆ 5 อย่างหลักๆ เรียงตามลำดับคือ:
1. Horizontal Offset (แกน X - แนวนอน)
2. Vertical Offset (แกน Y - แนวตั้ง)
3. Blur Radius (ความลางเบลอของเงา)
4. Spread Radius (การกระจายตัวขยายขนาดของเงา)
5. Color (สีและความโปร่งใสของเงา)

Question 3

เงาแบบ Inset คืออะไร ต่างจากแบบ Outset อย่างไร?

Accepted Answer

ปกติแล้วถ้าเราไม่ได้ระบุคำว่า inset ระบบ CSS จะทำเงาเป็น Outset อัตโนมัติ (กระจายเงาออกไปด้านนอกองค์ประกอบ) แต่เงาแบบ Inset คือการทำให้แรเงาตกลงมาอยู่ 'ด้านใน' ของขอบกล่อง สร้างเอฟเฟกต์เหมือนกล่องหน้าจอนั้นถูกเจาะยุบลึกลงไปในพื้นผิวนั่นเอง

CSS Box Shadow Generator

Shadow Settings

CSS Code

คำถามที่พบบ่อย (FAQ)