Thuộc tính text-shadow
Thuộc tính text-shadow thiết lập bóng đổ cho văn bản.
Giá trị của thuộc tính bao gồm 4
tham số, được liệt kê cách nhau bởi dấu cách, hoặc
từ khóa none, hủy bỏ bóng đổ
hoàn toàn (đây là giá trị mặc định).
Cú pháp
bộ_chọn {
text-shadow: dịch_chuyển_theo_x dịch_chuyển_theo_y độ_nhòe màu_sắc;
}
bộ_chọn {
text-shadow: none;
}
Các tham số
| Tham số | Mô tả |
|---|---|
| dịch chuyển theo x |
Xác định độ dịch chuyển của bóng theo trục X.
Giá trị dương dịch chuyển sang phải, giá trị âm - sang trái. |
| dịch chuyển theo y |
Xác định độ dịch chuyển của bóng theo trục Y.
Giá trị dương dịch chuyển xuống dưới, giá trị âm - lên trên. |
| độ nhòe |
Xác định độ nhòe của bóng.
Giá trị càng lớn - bóng càng bị nhòe. Tham số tùy chọn. Nếu không được xác định - bóng sẽ sắc nét. |
| màu sắc |
Xác định màu sắc của bóng trong bất kỳ đơn vị cho màu sắc nào.
Tham số tùy chọn. Nếu không được xác định - màu của bóng trùng với màu của văn bản. |
Các độ dịch chuyển theo trục và độ nhòe được xác định trong bất kỳ đơn vị cho kích thước nào, ngoại trừ phần trăm.
Ví dụ
Hãy dịch chuyển bóng xuống dưới và sang trái và thêm một chút độ nhòe:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-shadow: 5px 5px 3px black;
}
:
Ví dụ . Bóng sắc nét
Và bây giờ hãy tạo bóng màu đỏ, dịch chuyển nó xuống dưới và sang trái, nhưng loại bỏ độ nhòe - bóng sẽ sắc nét:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-shadow: 10px 10px red;
}
:
Ví dụ . Bóng đồng đều
Bây giờ bóng không bị dịch chuyển, nhưng đã được thêm độ nhòe:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-shadow: 0px 0px 3px black;
}
:
Xem thêm
-
thuộc tính
box-shadow,
thiết lập bóng đổ cho container