Rate this post

Thuộc tính text-shadow trong CSS được sử dụng để thêm hiệu ứng bóng đổ cho văn bản. Nó có nhiều giá trị, bao gồm offset theo trục ngang và trục dọc của bóng đổ, bán kính làm mờ và màu của bóng đổ.

Các bài viết liên quan

Ví dụ:

text-shadow: 2px 2px 2px #000000;

Điều này sẽ tạo ra một bóng đổ văn bản với offset theo trục ngang 2px, offset theo trục dọc 2px, bán kính làm mờ 2px và màu đen.

Bạn cũng có thể áp dụng nhiều bóng đổ cho văn bản bằng cách cung cấp nhiều giá trị được phân tách bằng dấu phẩy.

Ví dụ:

text-shadow: 2px 2px 2px #000000, -2px -2px 2px #ff0000;

Điều này sẽ tạo ra một bóng đổ văn bản với màu đen 2px sang phải và 2px xuống, và một bóng đổ khác với màu đỏ 2px sang trái và 2px lên.

Thuộc tính text-shadow có thể được áp dụng cho bất kỳ phần tử văn bản nào, chẳng hạn như tiêu đề, đoạn văn và liên kết, để trở thành một công cụ linh hoạt cho việc chỉnh sửa văn bản trên một trang web.

Lưu ý: Một số trình duyệt cũ hơn không hỗ trợ thuộc tính text-shadow, bạn có thể sử dụng một số thư viện như CSS3PIE, Selectivizr để bật hỗ trợ cho các trình duyệt cũ hơn.

Giá trị của text-shadow

Thuộc tính text-shadow cần nhiều giá trị như sau:

  • Offset theo trục ngang: Giá trị đầu tiên là offset theo trục ngang của bóng đổ, nó có thể được chỉ định bằng pixel, em hoặc bất kỳ đơn vị độ dài hợp lệ khác. Giá trị dương sẽ di chuyển bóng đổ sang phải, giá trị âm sẽ di chuyển nó sang trái.
  • Offset theo trục dọc: Giá trị thứ hai là offset theo trục dọc của bóng đổ, nó có thể được chỉ định bằng pixel, em hoặc bất kỳ đơn vị độ dài hợp lệ khác. Giá trị dương sẽ di chuyển bóng đổ xuống, giá trị âm sẽ di chuyển nó lên.
  • Bán kính làm mờ: Giá trị thứ ba là bán kính làm mờ của bóng đổ, nó có thể được chỉ định bằng pixel, em hoặc bất kỳ đơn vị độ dài hợp lệ khác. Giá trị này xác định độ mờ của bóng đổ. Giá trị lớn hơn sẽ tạo ra một bóng đổ mờ hơn, trong khi giá trị nhỏ hơn sẽ tạo ra một bóng đổ rõ hơn.
  • Màu: Giá trị thứ tư là màu của bóng đổ, nó có thể được chỉ định bằng bất kỳ định dạng màu hợp lệ như hex, RGB, RGBA, HSL, v.v.

Bạn có thể thêm thêm giá trị để tạo nhiều bóng đổ cho văn bản. Mỗi bóng đổ được phân tách bằng dấu phẩy.

Ví dụ:

text-shadow: 2px 2px 2px #000000, -2px -2px 2px #ff0000;

Ví dụ này tạo ra hai bóng đổ, bóng đổ đầu tiên là 2px sang phải và 2px xuống với màu đen, bóng đổ thứ hai là 2px sang trái và 2px lên với màu đỏ.

Lưu ý rằng, không phải tất cả các giá trị được yêu cầu, nếu bạn không chỉ định một giá trị, giá trị mặc định sẽ được sử dụng. Giá trị mặc định là: 0 cho offset theo trục ngang và trục dọc, 0 cho bán kính làm mờ và màu văn bản hiện tại cho màu.

Trả lời

Email 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 *

Contact Me on Zalo
Call now