แทรก CSS Box Shadow — โค้ดสำเร็จรูป
สร้างโค้ดกล่องเงา CSS ด้วยสายตา: แถบเลื่อนสำหรับออฟเซ็ต เบลอ กระจาย สีด้วยความทึบ โหมดแทรก และสูงสุดสี่เลเยอร์พร้อมการแสดงตัวอย่างแบบสด
ผลลัพธ์
หน้านี้จะเปิดตัวสร้างเงากล่องโดยทำเครื่องหมายที่ช่องแทรกแล้ว ดังนั้นเงาจึงถูกวาดไว้ภายในองค์ประกอบแทนที่จะอยู่ด้านหลัง การ์ดแสดงตัวอย่างจะแสดงเอฟเฟกต์แบบจมในครั้งเดียว และแถบเลื่อนทุกอันจะอัปเดตบรรทัด CSS อยู่เสมอ
เงาที่ใส่เข้าไปเป็นวิธีที่ CSS ปลอมความลึกเข้าไปด้านใน: สถานะของปุ่มกด, ช่องค้นหาและช่องอินพุต, รางแถบความคืบหน้าและแผงแกะสลักล้วนขึ้นอยู่กับสิ่งเหล่านี้ เนื่องจากเงาเกาะขอบด้านใน การเบลอและการกระจายจึงมีพฤติกรรมแตกต่างไปเล็กน้อยจากเงาตกกระทบปกติ แถบเลื่อนที่นี่ช่วยให้คุณรู้สึกถึงความแตกต่างนั้นได้ทันที
เมื่อรูปลักษณ์ที่จมถูกต้อง ให้คัดลอกเส้นกล่องเงาลงในสไตล์ชีตของคุณ คุณยังสามารถรวมเลเยอร์ที่ใส่เข้าไปเข้ากับเลเยอร์ภายนอกปกติได้ โดยเพิ่มเลเยอร์ที่สองและยกเลิกการทำเครื่องหมายที่เลเยอร์นั้นเพื่อผสมทั้งสองอย่างในการประกาศครั้งเดียว