Bùi Tấn Lực - 108
- 02/10/2025
Bùi Tấn Lực Thuộc tính text-shadow trong CSS dùng để đổ bóng màu sắc cho văn bản, bóng màu sắc có thể làm mờ hoặc có thể kết hợp nhiều màu, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính text-shadow trong CSS
Chức năng của Thuộc tính text-shadow trong CSS
Thuộc tính text-shadow trong CSS dùng để đổ bóng màu sắc cho văn bản, bóng màu sắc có thể làm mờ hoặc có thể kết hợp nhiều màu.
Cú pháp của Thuộc tính text-shadow trong CSS
text-shadow: giatri1 giatri1 mausac;
giatri1: Khoảng cách từ bên trái qua (Ví dụ: 2px, 1px,....)
giatri2: Khoảng cách từ trên xuống (Ví dụ 3px, 2px,....)
mausac: Màu sắc (Ví dụ: red, #ff0000,.....)
text-shadow: giatri1 giatri1 giatri3 mausac;
giatri1: Khoảng cách từ bên trái qua (Ví dụ: 2px, 1px,....)
giatri2: Khoảng cách từ trên xuống (Ví dụ 3px, 2px,....)
giatri3: Độ rộng làm mờ (Ví dụ 3px, 2px,....)
mausac: Màu sắc (Ví dụ: red, #ff0000,.....)
Code Thuộc tính text-shadow trong CSS
text-shadow: 2px 2px #ff0000; Từ trái qua 2px, từ trên xuống 3px
text-shadow: 2px 3px 8px #FF0000; Từ trái qua 2px, từ trên xuống 3px, làm mờ 8px
Kết hợp nhiều màu
text-shadow: 1px 1px 1px #fff, 2px 2px 2px #ccc, 3px 3px 3px #aaa;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-shadow trong CSS</title>
<style>
p{font-size:21px;font-weight:bold}
</style>
</head>
<body>
<h1>Code Thuộc tính text-shadow trong CSS</h1>
<span>Dùng để đổ bóng màu sắc cho văn bản trong HTML, bóng màu sắc có thể làm mờ hoặc có thể kết hợp nhiều màu:</span>
<p style="text-shadow: 2px 3px #ff0000;">text-shadow: 2px 2px #ff0000; Từ trái qua 2px, từ trên xuống 3px</p>
<p style="text-shadow: 2px 3px 8px #FF0000;">text-shadow: 2px 3px 8px #FF0000; Từ trái qua 2px, từ trên xuống 3px, làm mờ 8px</p>
<h2>Kết hợp nhiều màu</h2>
<p style="text-shadow: 1px 1px 1px #fff, 2px 2px 2px #ccc, 3px 3px 3px #aaa;">text-shadow: 1px 1px 1px #fff, 2px 2px 2px #ccc, 3px 3px 3px #aaa;</p>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-shadow trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
