Thuộc tính textShadow của HTML DOM Style

Thuộc tính style.textShadow trong HTML DOM thêm hiệu ứng bóng đổ cho văn bản của một phần tử.

Cú pháp

Lấy giá trị textShadow

object.style.textShadow

Thiết lập giá trị textShadow

object.style.textShadow = "giá_trị"

Các giá trị hợp lệ

Giá trị	Mô tả
inherit	Kế thừa từ phần tử cha.
initial	Đặt về mặc định (none).
none	Không có bóng đổ (mặc định).
h-shadow v-shadow blur color	Xác định bóng đổ: h-shadow: độ lệch ngang (bắt buộc). v-shadow: độ lệch dọc (bắt buộc). blur: độ mờ (tùy chọn, mặc định 0). color: màu bóng (tùy chọn, mặc định màu chữ). Ví dụ: `"2px 2px 4px #ff0000"`.

Ví dụ minh họa

Thêm bóng đỏ cho đoạn văn bản:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { margin: 1.5rem auto; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính textShadow</h1>
<p>Văn bản có bóng đổ</p>
<button onclick="add()" class="btn">Thêm textShadow</button>
<script>
  function add() {
    document.querySelector('p').style.textShadow = "10px 10px 2px #db133a";
  }
</script>
</body>
</html>

Kết quả

Nhấn "Thêm textShadow" để văn bản xuất hiện bóng đổ đỏ lệch 10px phải, 10px xuống, mờ 2px.