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

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

ไวยากรณ์

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

cssselector {
  box-shadow: none;
}

พารามิเตอร์

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

ตัวอย่าง

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

ดูเพิ่มเติม