CSS3 cung cấp box-shadow (đổ bóng hộp) và text-shadow (đổ bóng chữ) để tạo chiều sâu, hiệu ứng nổi.
Cú pháp
/* Box Shadow */
box-shadow: h-offset v-offset blur spread color inset;
/* Text Shadow */
text-shadow: h-offset v-offset blur color; /* Không có spread, không có inset */
Ví dụ mã nguồn
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
h2 { color: rgb(28, 0, 128); text-shadow: 2px 4px 2px red; }
.box-shadow-demo {
color: white; text-align: center;
width: 200px; height: 150px;
background-color: red;
box-shadow: 8px 8px 16px rgba(89, 0, 255, 0.6);
margin: 20px auto;
display: flex; align-items: center; justify-content: center;
font-weight: bold;
}
/* Multiple shadows */
.multi-shadow {
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1),
0 16px 32px rgba(0,0,0,0.1);
}
/* Inset shadow (bên trong) */
.inset-shadow {
background: #eee;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
}
/* Neon glow */
.neon { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 40px #ff00de; }
</style>
</head>
<body>
<h1>Shadow Effects</h1>
<h2>Text Shadow Example</h2>
<div class="box-shadow-demo">BOX SHADOW</div>
<div class="box-shadow-demo multi-shadow">LAYERED SHADOWS</div>
<div class="box-shadow-demo inset-shadow" style="color:#333">INSET SHADOW</div>
<div class="box-shadow-demo neon" style="background:#111; color:#ff00de">NEON GLOW</div>
</body>
</html>
Chi tiết tham số
| Tham số | Box Shadow | Text Shadow |
|---|---|---|
| h-offset | Bắt buộc. Ngang (+ phải, - trái) | Bắt buộc |
| v-offset | Bắt buộc. Dọc (+ xuống, - lên) | Bắt buộc |
| blur-radius | Tùy chọn. Độ mờ (mặc định 0) | Tùy chọn |
| spread-radius | Tùy chọn. Mở rộng/bóp bóng (mặc định 0) | Không có |
| color | Tùy chọn. Màu bóng (mặc định currentColor) | Tùy chọn |
| inset | Tùy chọn. Bóng bên trong | Không có |
Mẹo hay
- Layered shadows: Nhiều shadow cách nhau dấu phẩy → chiều sâu thực tế (Material Design)
- text-shadow cho outline:
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; - drop-shadow() filter: Dùng cho ảnh transparent PNG (bóng theo hình ảnh, không theo hộp)
- Performance: Box-shadow đơn giản OK. Nhiều layer blur lớn có thể chậm. Dùng
will-change: box-shadownếu animate.