เครื่องมือสร้าง Box Shadow

วิธีใช้งาน

1. เริ่มจากค่าที่ตั้งไว้ล่วงหน้า หรือปรับระยะเยื้อง ระยะเบลอ ระยะขยาย สี และความทึบของชั้นแรก
2. เพิ่มชั้นเพื่อให้ได้มิติที่ดูเป็นธรรมชาติมากขึ้น หรือเลือก “Inset” เพื่อสร้างเงาด้านใน
3. ปรับพื้นหลังตัวอย่างและสีของกล่องให้เข้ากับดีไซน์ แล้วคัดลอก CSS

วิธีการทำงาน

แต่ละชั้นของ box-shadow ประกอบด้วยระยะเยื้องแนวนอน ระยะเยื้องแนวตั้ง รัศมีเบลอ ระยะขยาย และสี โดยอาจใส่ inset ไว้ข้างหน้าก็ได้ ค่าระยะเยื้องบวกจะเลื่อนเงาไปทางขวาและลงด้านล่าง การเบลอช่วยให้ขอบเงานุ่มลง และกำหนดเป็นค่าลบไม่ได้ ส่วนระยะขยายจะทำให้เงาใหญ่ขึ้น (ค่าบวก) หรือเล็กลง (ค่าลบ) ก่อนเบลอ หากมีหลายชั้น ให้คั่นแต่ละชั้นด้วยเครื่องหมายจุลภาค โดยชั้นแรกจะแสดงอยู่ด้านบนสุด

โดยทั่วไป เงาที่ดูมีมิติมักประกอบด้วยเงาขนาดเล็กที่ขอบคมและเงาขนาดใหญ่ที่ฟุ้งกว่าโดยใช้ความทึบต่ำ ซึ่งเป็นลักษณะของค่าที่ตั้งไว้ล่วงหน้า “ยกสูง” สีจะเขียนในรูปแบบ rgba() เพื่อระบุความทึบแสงอย่างชัดเจน เงาจะเป็นไปตาม border-radius ขององค์ประกอบและไม่กินพื้นที่ในเลย์เอาต์ จึงไม่ทำให้องค์ประกอบอื่นขยับ

เงาที่มีค่าเบลอสูงมากบนองค์ประกอบหลายรายการอาจทำให้การเลื่อนหน้าจอช้าลงในโทรศัพท์รุ่นเริ่มต้น หากต้องการทำภาพเคลื่อนไหวให้เงา โดยทั่วไปการค่อย ๆ แสดง pseudo-element ที่มีเงาอยู่แล้วจะลื่นไหลกว่าการทำภาพเคลื่อนไหวกับ box-shadow โดยตรง

ตัวอย่าง

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

ความเป็นส่วนตัว

สร้าง CSS ในเบราว์เซอร์ของคุณ โดยไม่มีการอัปโหลดหรือจัดเก็บข้อมูล