Thuộc tính textShadow thêm hiệu ứng bóng cho văn bản. Chấp nhận danh sách các bóng, mỗi bóng gồm: offset-x, offset-y, blur-radius (tùy chọn), color (tùy chọn). Có thể tạo nhiều bóng cách nhau bởi dấu phẩy.
Ví dụ minh họa
Mã sau thêm 2 lớp bóng cho văn bản khi nhấn nút:
<!DOCTYPE html>
<html>
<body>
<button onclick="setTextShadow()">Đặt bóng văn bản</button>
<div id="myID" style="font-size: 1.5rem; font-weight: bold;">
Đây là Văn bản Demo! Đây là Văn bản Demo! Đây là <br>
Đây là Văn bản Demo! Đây là Văn bản Demo! Đây là Văn bản Demo! Đây là Văn bản Demo!<br>
Đây là Văn bản Demo!<br>
Đây là Văn bản Demo! Đây là Văn bản Demo! Đây là Văn bản Demo! Đây là Văn bản Demo!
</div>
<script>
function setTextShadow() {
document.getElementById("myID").style.textShadow =
"2px 2px 2px #ff0000, 20px 5px 2px #F1F1F1";
/* Bóng 1: x=2px, y=2px, blur=2px, màu đỏ
Bóng 2: x=20px, y=5px, blur=2px, màu xám nhạt */
}
</script>
</body>
</html>
Cú pháp textShadow
textShadow: h-shadow v-shadow blur-radius color | none
h-shadow(bắt buộc): Offset ngang. Dương = phải, Âm = trái.v-shadow(bắt buộc): Offset dọc. Dương = dưới, Âm = trên.blur-radius(tùy chọn): Độ mờ. Mặc định 0. Không được âm.color(tùy chọn): Màu bóng. Mặc định =currentColor(màu chữ).- Nhiều bóng: cách nhau bởi dấu phẩy, vẽ theo thứ tự (bóng đầu tiên ở trên cùng).
Ví dụ phổ biến
| Hiệu ứng | CSS |
|---|---|
| Bóng đơn giản | "2px 2px 4px #000" |
| Bóng không mờ (hard shadow) | "3px 3px 0 #333" |
| Bóng phát sáng (glow) | "0 0 10px #ff0", "0 0 20px #f80" |
| Chữ khắc (inset effect) | "1px 1px 0 #fff", "-1px -1px 0 #000" |
| Xóa bóng | "none" |
Mẹo: Dùng nhiều bóng mỏng (blur nhỏ) chồng lên nhau để tạo hiệu ứng gradient shadow mượt mà.