เครื่องมือสร้าง CSS Box Shadow
CSS Box Shadow คืออะไร?
คุณสมบัติ CSS box-shadow เพิ่มเอฟเฟกต์เงารอบกรอบขององค์ประกอบ เงาสามารถเลื่อน เบลอ กระจาย ระบายสี และตั้งค่าเป็น inset (เงาด้านใน) ได้ เงาหลายรายการที่คั่นด้วยเครื่องหมายจุลภาคสามารถวางซ้อนกันเพื่อสร้างเอฟเฟกต์ที่สวยงาม เครื่องมือนี้ช่วยให้คุณสร้างเงาหลายเลเยอร์ที่ซับซ้อนแบบภาพและคัดลอก CSS ที่พร้อมวางไปยังคลิปบอร์ด
วิธีใช้เครื่องมือสร้าง Box Shadow
-
ปรับแถบเลื่อนสำหรับ Offset X/Y, Blur และ Spread เพื่อกำหนดตำแหน่งและรูปร่างของเงา
-
คลิกที่ตัวอย่างสีเพื่อเลือกสีเงา และใช้แถบเลื่อน Opacity สำหรับความโปร่งใส
-
สลับ 'Inset' เพื่อสร้างแสงเรืองภายในหรือเอฟเฟกต์กดลง
-
คลิก '+ เพิ่มเลเยอร์' เพื่อซ้อนเงาหลายชั้น
-
คัดลอก CSS ที่สร้างขึ้นและวางลงในสไตล์ชีตของคุณ
คำถามที่พบบ่อย
ความแตกต่างระหว่าง box-shadow และ drop-shadow filter คืออะไร? box-shadow เพิ่มเงาไปรอบ ๆ กล่องขอบสี่เหลี่ยมของอิลิเมนต์ และรองรับเงา inset CSS filter: drop-shadow() ใช้กับรูปร่างภาพของอิลิเมนต์ (รวมถึง transparency) ทำให้เป็นไปตามเส้นขอบที่ไม่ใช่สี่เหลี่ยม เช่น PNG ที่มีพื้นหลังแบบ transparent
ฉันจะสร้างเอฟเฟกต์การยกระดับการ์ด Material Design ได้อย่างไร? นำเงากล่องสองอันมาซ้อนกัน: soft ambient shadow (blur ใหญ่ opacity ต่ำ spread เล็กน้อย) และ key shadow (blur เล็ก opacity สูง offset ตามทิศทาง) ตัวอย่างเช่น: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08)
box-shadow ส่งผลกระทบต่อเลย์เอาต์หน้าหรือไม่? ไม่ใช่ box-shadow ไม่ส่งผลกระทบต่อขนาดของอิลิเมนต์หรือตำแหน่งในการไหลของเอกสาร ซึ่งแตกต่างจาก outline มันไม่ครอบครองพื้นที่เลย์เอาต์และจะไม่ผลักอิลิเมนต์อื่น ๆ ออกไป
ฉันสามารถ animate box-shadow ได้หรือไม่? ได้ box-shadow สามารถเคลื่อนไหวด้วย CSS transitions และ animations สำหรับประสิทธิภาพ ให้ animate box-shadow เฉพาะเมื่อจำเป็น — เบราว์เซอร์ไม่สามารถ GPU-accelerate การเปลี่ยน box-shadow ได้อย่างมีประสิทธิภาพเท่า transform หรือ opacity
Keywords: เครื่องมือสร้าง CSS box shadow, box-shadow CSS, เครื่องมือเงา CSS, CSS drop shadow, inset shadow, เงาหลายเลเยอร์, CSS shadow ออนไลน์