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