คุณสมบัติ box-shadow

คุณสมบัติ box-shadow กำหนดเงาให้กับบล็อก เป็นค่าที่รับพารามิเตอร์ 6 ตัว โดยคั่นด้วยช่องว่าง หรือ คีย์เวิร์ด none ซึ่งจะยกเลิกเงา ทั้งหมด

ไวยากรณ์

selector {
	box-shadow: inset offset_x offset_y blur spread color;
}

selector {
	box-shadow: none;
}

พารามิเตอร์

พารามิเตอร์	คำอธิบาย
`inset`	พารามิเตอร์ที่เลือกได้ ถ้ากำหนด เงาจะอยู่ด้านในคอนเทนเนอร์ ถ้าไม่กำหนด - จะอยู่ด้านนอก
offset x	กำหนดการเคลื่อนเงาไปตามแกน X ค่าบวกจะเลื่อนไปทางขวา ค่าลบ - ไปทางซ้าย
offset y	กำหนดการเคลื่อนเงาไปตามแกน Y ค่าบวกจะเลื่อนลงด้านล่าง ค่าลบ - ขึ้นด้านบน
blur	กำหนดความเบลอของเงา ยิ่งค่ามาก เงาก็จะยิ่งเบลอมากขึ้น พารามิเตอร์ที่เลือกได้ หากไม่กำหนด - เงาจะคมชัด
spread	กำหนดขนาดของเงา ค่าบวกจะขยายเงา ค่าลบ ในทางตรงกันข้าม จะทำให้เงาหดตัว พารามิเตอร์ที่เลือกได้ หากไม่กำหนด - เงาจะมี ขนาดเท่ากับองค์ประกอบ
color	กำหนดสีของเงาในหน่วยใดๆ สำหรับสี พารามิเตอร์ที่เลือกได้ หากไม่กำหนด - สีของเงาจะตรงกับสีของข้อความ

การเคลื่อนตามแกน ความเบลอ และขนาดของเงา กำหนดในหน่วยใดๆ สำหรับขนาด ยกเว้นเปอร์เซ็นต์

ตัวอย่าง

ในตัวอย่างนี้ เงาถูกเลื่อนลงและไปทางขวา และเพิ่มความเบลอเล็กน้อย:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

ตัวอย่าง เงาที่คมชัด

ในตัวอย่างนี้ เงาถูกเลื่อนลงและไปทางขวา แต่ไม่มีความเบลอ (เงาจะคมชัด):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

ตัวอย่าง เงาที่สม่ำเสมอ

ในตัวอย่างนี้ เงาไม่ถูกเลื่อน แต่เพิ่ม ความเบลอให้กับมัน:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

ตัวอย่าง ขนาดของเงา

ในตัวอย่างนี้ เงาไม่ถูกเลื่อน ความเบลอ เท่ากับศูนย์ แต่เพิ่มขนาดให้กับมัน (สีดำ - คือเส้นขอบ สีแดง - คือเงา):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

ตัวอย่าง ความเบลอ + ขนาดของเงา

ในตัวอย่างนี้ เงาไม่ถูกเลื่อน แต่เพิ่ม ความเบลอและขนาดให้กับมัน (สีดำ - คือ เส้นขอบ สีแดง - คือเงา):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

ตัวอย่าง เงาภายใน

ในตัวอย่างนี้ เงาอยู่ภายในคอนเทนเนอร์:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

ดูเพิ่มเติม

คุณสมบัติ text-shadow
ซึ่งกำหนดเงาให้กับข้อความ