p ( text-shadow: 1px 1px 1px #000; )Bạn có thể áp dụng nhiều bóng văn bản bằng cách phân tách bằng dấu phẩy
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Hai giá trị đầu tiên chỉ định độ dài của phần bù bóng. Giá trị đầu tiên chỉ định khoảng cách ngang và giá trị thứ hai chỉ định khoảng cách dọc của bóng. Giá trị thứ ba chỉ định bán kính mờ và giá trị cuối cùng mô tả màu sắc của bóng:
1. giá trị = Tọa độ X
2. giá trị = Tọa độ Y
3. giá trị = Bán kính mờ
4. giá trị = Màu của bóng
Sử dụng số dương làm hai giá trị đầu tiên kết thúc bằng việc đặt bóng ở bên phải văn bản theo chiều ngang (giá trị đầu tiên) và đặt bóng bên dưới văn bản theo chiều dọc (giá trị thứ hai).
Giá trị thứ ba, bán kính mờ, là một giá trị tùy chọn có thể được chỉ định nhưng không bắt buộc. Đó là số lượng pixel mà văn bản bị kéo dài gây ra hiệu ứng mờ. Nếu bạn không sử dụng giá trị thứ ba, nó được coi như thể bạn chỉ định bán kính mờ bằng 0.
Ngoài ra, hãy nhớ rằng bạn có thể sử dụng các giá trị RGBa hoặc HSLa cho màu sắc, ví dụ: độ trong suốt 40% của màu trắng:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Ví dụ
Xem Ví dụ về bóng chữ phức tạp của bút của Chris Coyier (@chriscoyier) trên CodePen.
Thêm thông tin
- Tài liệu MDN
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1,1+ | 3,5+ | 9.5+ | 10+ | bất kì | bất kì |