Thuộc tính text-shadow CSS
- trang trước text-overflow
- trang sau text-transform
Định nghĩa và cách sử dụng
Thuộc tính text-shadow đặt bóng vào văn bản.
Xem thêm:
Hướng dẫn CSS3:Hiệu ứng văn bản CSS3
Hướng dẫn HTML DOM:Thuộc tính textShadow
Ví dụ
Hiệu ứng bóng văn bản cơ bản:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Có nhiều ví dụ hơn ở cuối trang.
Ngữ pháp CSS
text-shadow: h-shadow v-shadow blur color;
Chú ý:Thuộc tính text-shadow thêm một hoặc nhiều bóng vào văn bản. Thuộc tính này là danh sách bóng cách nhau bằng dấu phẩy, mỗi bóng có hai hoặc ba giá trị độ dài và một giá trị màu sắc tùy chọn để quy định. Giá trị bị bỏ qua là 0.
Giá trị thuộc tính
| Giá trị | Mô tả | Kiểm tra |
|---|---|---|
| h-shadow | Bắt buộc. Vị trí bóng theo chiều ngang. Cho phép giá trị âm. | Kiểm tra |
| v-shadow | Bắt buộc. Vị trí bóng theo chiều dọc. Cho phép giá trị âm. | Kiểm tra |
| blur | Tùy chọn. Khoảng cách mờ. | Kiểm tra |
| color | Tùy chọn. Màu sắc của bóng. Giá trị màu CSS. | Kiểm tra |
Chi tiết kỹ thuật
| Giá trị mặc định: | none |
|---|---|
| Kế thừa: | yes |
| Phiên bản: | CSS3 |
| Ngữ pháp JavaScript: | object.style.textShadow="2px 2px #ff0000" |
Nhiều ví dụ hơn
- Bóng văn bản với hiệu ứng mờ
- Ví dụ này演示 bóng văn bản với hiệu ứng mờ.
- Bóng văn bản trên văn bản màu trắng
- Ví dụ này演示 bóng văn bản trên văn bản màu trắng.
- Bóng văn bản với hiệu ứng neon
- Ví dụ này演示 văn bản có hiệu ứng bóng văn bản neon.
Hỗ trợ trình duyệt
Số trong bảng chú thích đã cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
- trang trước text-overflow
- trang sau text-transform
