คุณสมบัติ boxShadow (CSS: box-shadow) ใช้สำหรับเพิ่มเงาให้กับกรอบขององค์ประกอบ สร้างความลึกและมิติ
ไวยากรณ์ (Syntax)
object.style.boxShadow = "none|h-offset v-offset blur spread color|inset|initial|inherit"พารามิเตอร์ (เรียงลำดับ)
| พารามิเตอร์ | คำอธิบาย | จำเป็น |
|---|---|---|
| h-offset | ระยะห่างแนวนอน (+ขวา, -ซ้าย) | ✓ |
| v-offset | ระยะห่างแนวตั้ง (+ล่าง, -บน) | ✓ |
| blur | รัศมีการเบลอ (ค่ามาก = เบลอมาก) | ✗ (default 0) |
| spread | รัศมีการขยาย/หดตัว (+ใหญ่ขึ้น, -เล็กลง) | ✗ (default 0) |
| color | สีเงา (รองรับทุกรูปแบบ CSS) | ✗ (default currentColor) |
| inset | เงาภายใน (แทนที่จะเป็นภายนอก) | ✗ |
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 100px;
box-shadow: 10px 10px 3px orange;
}
</style>
<script>
function changeBoxShadow() {
document.getElementById("DIV1").style.boxShadow = "1px 10px 10px 10px green";
document.getElementById("Sample").innerHTML = "เงาของกล่องถูกเปลี่ยนแล้ว";
}
</script>
</head>
<body>
<div id="DIV1">นี่คือ div ตัวอย่าง</div>
<p>คลิกปุ่มเพื่อเปลี่ยนเงาของ div ด้านบน</p>
<button onclick="changeBoxShadow()">เปลี่ยน Box Shadow</button>
<p id="Sample"></p>
</body>
</html>ผลลัพธ์
ก่อน: เงาสีส้ม offset 10px,10px blur 3px
หลัง: เงาสีเขียว offset 1px,10px blur 10px spread 10px
ตัวอย่างรูปแบบเงาทั่วไป
| เอฟเฟกต์ | CSS |
|---|---|
| เงามาตรฐาน | box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| เงาลึก (Elevation) | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); |
| เงาภายใน (Inset) | box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); |
| Glow / Neon | box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff; |
| Neumorphism | box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff; |
| Multiple Shadows | box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); |
หลายเงา (Multiple Shadows)
/* คั่นด้วยจุลภาค */
box-shadow:
0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24),
inset 0 -1px 0 rgba(255,255,255,0.1);การเคลื่อนไหว (Animation)
.card {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}ประสิทธิภาพ (Performance)
- หลีกเลี่ยง blur radius ใหญ่เกินไป (>50px) บนองค์ประกอบใหญ่
- ใช้
will-change: box-shadowสำหรับ Animation - Drop shadow (
filter: drop-shadow()) ใช้ GPU เร็วกว่าสำหรับรูปทรงซับซ้อน
การรองรับเบราว์เซอร์
รองรับเต็มรูปแบบ Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE9+
