CSS Box Shadow - Tạo Bóng Đổ Cho Phần Tử

Bóng đổ (box-shadow) tạo chiều sâu, làm phần tử nổi bật (như card, image, button). Thuộc tính box-shadow thêm bóng cho khung phần tử, hỗ trợ cả bo góc.

Cú Pháp Box Shadow

box-shadow: offset-x offset-y blur-radius spread color;

• offset-x: Dịch ngang (bắt buộc)
• offset-y: Dịch dọc (bắt buộc)
• blur-radius: Độ mờ bóng (tùy chọn)
• spread: Bán kính lan tỏa bóng (tùy chọn)
• color: Màu bóng (mặc định đen, tùy chọn)

Hộp Mẫu Cho Các Ví Dụ

<div><p>This is a box.</p></div>
div { height: 100px; width: 200px; padding: 10px; background: lightblue; }

Các Loại Bóng Đổ

1. Bóng Cơ Bản (Offset X, Y)

div { box-shadow: 10px 10px; }

Bóng đen lệch 10px ngang và dọc.

2. Bóng Có Màu

div { box-shadow: 10px 10px lightgray; }

Bóng xám nhạt.

3. Bóng Có Blur

div { box-shadow: 10px 10px 3px lightgray; }

Bóng xám nhạt, mờ 3px.

4. Bóng Có Spread (Lan Tỏa)

div { box-shadow: 10px 10px 5px 5px lightgray; }

Bóng lan rộng thêm 5px mọi hướng.

5. Nhiều Bóng (Multiple Shadows)

Danh sách cách nhau bởi dấu phẩy. Offset phải khác nhau.

div { box-shadow: 5px 5px lightgray, 10px 10px pink; }

6. Inset Shadow - Bóng Bên Trong

Từ khóa inset đổi bóng ngoài thành bóng trong.

div { box-shadow: 5px 5px lightgray inset; }

Bảng Tham Khảo Thuộc Tính

Kết Luận

box-shadow tạo bóng đổ linh hoạt: offset, blur, spread, color, inset, multiple shadows. Hỗ trợ border-radius. Công cụ đắc lực cho thiết kế card, button, image hiện đại.