Với CSS, bạn có thể thêm bóng vào văn bản và các phần tử

Trong đó có các thuộc tính sau:

• text-shadow
• box-shadow

1. Hiệu ứng đổ bóng cho văn bản trong CSS

Thuộc tính CSS text-shadow áp dụng hiệu ứng đổ bóng cho văn bản

Ví dụ:

Bạn cũng có thể thêm nhiều bóng cho văn bản bằng cách thêm danh sách các bóng được phân tách bằng dấu phẩy

Ví dụ:

Bạn cũng có thể sử dụng thuộc tính text-shadow để tạo đường viền đơn giản xung quanh một số văn bản (không có bóng)

Ví dụ:

2. Hiệu ứng đổ bóng cho phần tử trong CSS

Thuộc tính CSS box-shadow được sử dụng để áp dụng một hoặc nhiều bóng cho một phần tử

Ví dụ:

Trong box-shadow: 10px 10px 5px 12px grey; :

• Hai tham số đầu xác định độ dài của bóng ngang và bóng dọc
• Tham số thứ ba(Tham số blur) xác định độ mờ của bóng, tham số càng lớn thì bóng càng mờ
• Tham só thứ tư (Tham số spread) xác định bán kính lây lan của bóng. Giá trị dương làm tăng kích thước của bóng, giá trị âm làm giảm kích thước của bóng
• Tham số thứ năm xác định màu sắc của bóng

2.1 Đặt bóng vào bên trong phần tử

Tham số inset thay đổi bóng từ bóng bên ngoài phần tử(bóng đầu tiên) thành bóng bên trong phần tử

Ví dụ:

2.2 Thêm nhiều bóng cho phần tử