ตัวสร้าง CSS Box Shadow

CSS box-shadow เป็นคุณสมบัติ CSS ที่เพิ่มเอฟเฟกต์เงารอบกรอบองค์ประกอบ ช่วยให้คุณสร้างเงาหล่น เงาภายใน และชั้นเงาหลายชั้นโดยระบุออฟเซ็ต รัศมีเบลอ รัศมีกระจาย และค่าสี

คุณสมบัติ box-shadow ยอมรับค่าหลายค่า: ออฟเซ็ตแนวนอน (X), ออฟเซ็ตแนวตั้ง (Y), รัศมีเบลอ, รัศมีกระจาย, สี และคีย์เวิร์ด inset เลือกได้ คุณยังสามารถระบุเงาหลายดวงคั่นด้วยเครื่องหมายจุลภาค

คีย์เวิร์ด inset เปลี่ยนเงาจากเงาภายนอก (เงาหล่น) เป็นเงาภายใน เมื่อระบุ inset เงาจะถูกวาดภายในขอบขององค์ประกอบแทนที่จะอยู่ภายนอก สร้างเอฟเฟกต์ฝัง

รัศมีเบลกำหนดว่าขอบเงาจะเบลอมากแค่ไหน ค่า 0 สร้างขอบที่คมชัดและแข็ง ค่าที่ใหญ่กว่าสร้างเงาที่กระจายและนุ่มนวลกว่าซึ่งยืดออกไปจากองค์ประกอบไกลกว่า

รัศมีกระจายขยายหรือหดขนาดเงา ค่าบวกทำให้เงาใหญ่กว่าองค์ประกอบ ในขณะที่ค่าลบทำให้เล็กลง สิ่งนี้ส่งผลต่อเงาก่อนที่จะใช้การเบลอ

คุณสามารถสร้างเงาหลายดวงโดยแยกการกำหนดเงาแต่ละดวงด้วยเครื่องหมายจุลภาค เงาแต่ละดวงสามารถมีค่าออฟเซ็ต เบลอ กระจาย และสีที่แตกต่างกัน เงาจะถูกใช้ตามลำดับที่ประกาศ โดยเงาแรกอยู่ด้านบน

ได้ คุณสามารถใช้รูปแบบสี CSS ใด ๆ รวมถึง RGBA, HSLA, HEX หรือสีที่ตั้งชื่อ RGBA และ HSLA มีประโยชน์อย่างยิ่งสำหรับการสร้างเงากึ่งโปร่งใสที่ผสมผสานกับพื้นหลังอย่างเป็นธรรมชาติ

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

ใช่ box-shadow รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมดรวมถึง Chrome, Firefox, Safari, Edge และ Opera เป็นส่วนหนึ่งของ CSS3 ตั้งแต่ปี 2011 และมีความเข้ากันได้กับเบราว์เซอร์ที่ยอดเยี่ยม

box-shadow มีผลกระทบต่อประสิทธิภาพของเบราว์เซอร์สมัยใหม่น้อยมาก อย่างไรก็ตาม การใช้เงาที่ซับซ้อนหลายดวงที่มีรัศมีเบลอขนาดใหญ่บนองค์ประกอบจำนวนมากอาจส่งผลต่อประสิทธิภาพการเรนเดอร์ โดยเฉพาะบนอุปกรณ์มือถือ

การใช้งานทั่วไปรวมถึงการสร้างเอฟเฟกต์ยกการ์ด เพิ่มความลึกให้กับปุ่ม สร้างฟิลด์ฟอร์มฝัง ใช้เงา material design และเพิ่มการแยกภาพระหว่างองค์ประกอบที่ทับซ้อนกัน

ได้ box-shadow สามารถแอนิเมทได้โดยใช้การเปลี่ยนภาพหรือแอนิเมชัน CSS อย่างไรก็ตาม การแอนิเมท box-shadow อาจใช้ทรัพยากรสูง เพื่อประสิทธิภาพที่ดีขึ้น พิจารณาใช้ pseudo-element กับการเปลี่ยนความทึบแทน