Bóng văn bản CSS
Bóng văn bản
Thuộc tính text-shadow
thêm bóng vào văn bản.
Trong cách sử dụng đơn giản nhất, bạn chỉ xác định bóng ngang (2px) và bóng dọc (2px):
Hiệu ứng đổ bóng văn bản!
Tiếp theo, thêm màu (đỏ) cho bóng:
Hiệu ứng đổ bóng văn bản!
Sau đó, thêm hiệu ứng làm mờ (5px) cho bóng:
Hiệu ứng đổ bóng văn bản!
Thêm ví dụ về bóng văn bản
ví dụ 1
Bóng văn bản trên văn bản màu trắng:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Hãy tự mình thử »Ví dụ 2
Bóng văn bản với ánh sáng neon màu đỏ:
h1 {
text-shadow: 0 0 3px #ff0000;
}
Hãy tự mình thử »Ví dụ 3
Bóng văn bản với ánh sáng neon đỏ và xanh:
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
Hãy tự mình thử »Ví dụ 4
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0
0 5px darkblue;
}
Hãy tự mình thử »Mẹo: Đi tới chương Phông chữ CSS của chúng tôi để tìm hiểu về cách thay đổi phông chữ, kích thước văn bản và kiểu văn bản.
Mẹo: Đi tới chương Hiệu ứng văn bản CSS của chúng tôi để tìm hiểu về các hiệu ứng văn bản khác nhau.
Thuộc tính bóng văn bản CSS
Property | Description |
---|---|
text-shadow | Specifies the shadow effect added to text |