สร้าง CSS box-shadow

ทำงานอย่างไร

box-shadow รับตัวเลขสี่ตัวและสีหนึ่งสีตามลำดับที่กำหนด และความต่างระหว่างเงาที่ดูมีมิติกับเงาที่ดูเหมือนสติกเกอร์อยู่ที่ตัวเลขเหล่านั้นทั้งหมด การเห็นมันเปลี่ยนไปขณะลากเร็วกว่าการเดามาก

ตัวเลขสี่ตัวหมายถึงอะไร

ตามลำดับ คือ ระยะเยื้องแนวนอน ระยะเยื้องแนวตั้ง รัศมีการเบลอ และการขยาย ระยะเยื้องเลื่อนเงา การเบลอทำให้ขอบนุ่ม การขยายทำให้เงาโตหรือหดก่อนเบลอ การขยายที่เป็นค่าลบดึงเงาเข้ามา ซึ่งเป็นวิธีทำให้ได้เงาแนบแน่นใต้การ์ดโดยไม่รั่วออกด้านข้าง

ทำให้ดูสมจริง

โดยปกติแสงมาจากด้านบน ระยะเยื้องแนวตั้งเป็นบวกเล็กน้อยโดยไม่มีระยะเยื้องแนวนอนจึงดูเป็นธรรมชาติ เงาขนาดใหญ่ที่โปร่งใสมากให้ความรู้สึกมิติแบบนุ่ม ส่วนเงาเล็ก เข้ม และคมให้ความรู้สึกเหมือนสติกเกอร์ที่ตัดออกมา วัตถุจริงทอดเงาที่เบลอมากขึ้นเมื่ออยู่ห่างจากพื้นผิวมากขึ้น การเบลอที่มากกว่าสื่อว่าองค์ประกอบอยู่สูงกว่า

เงาแบบ inset

เงาแบบ inset ถูกวาดภายในองค์ประกอบแทนที่จะอยู่ภายนอก ซึ่งเป็นวิธีสร้างปุ่มที่ถูกกด ช่องกรอกข้อมูล และแผงที่เว้าเข้าไป ตัวเลขสี่ตัวเดียวกันใช้ได้ เพียงแต่ชี้เข้าด้านใน

หลายเงาพร้อมกัน

CSS รับรายการที่คั่นด้วยเครื่องหมายจุลภาค และการซ้อนสองชั้น ชั้นหนึ่งแนบแน่นและเข้ม อีกชั้นกว้างและจาง ดูดีกว่าชั้นเดียวมาก เครื่องมือนี้สร้างหนึ่งเงา ให้วางสองอันต่อกันเองเพื่อให้ได้เอฟเฟกต์หลายชั้น