Thuộc tính CSS text-shadow

Thuộc tính text-shadow của CSS tương tự như thuộc tính box-shadow , nhưng shadow được áp dụng cho từng chữ cái thay vì các đường biên của phần tử:

text-shadow: 2px 2px 1px rgba(0,0,0,0.4);

Các giá trị theo thứ tự sau: offset-x offset-y blur-radius color .

Bạn cũng có thể xác định nhiều bóng:

text-shadow: 45px 25px 4px rgb(25,93,229),
             25px 15px 1px rgb(25,93,229);

Lưu ý rằng, như với thuộc tính box-shadow , bạn có thể xác định nhiều bóng đổ được phân tách bằng dấu phẩy. Tuy nhiên, không giống với box-shadow , bạn không thể xác định giá trị spread hoặc sử dụng từ khóa inset cho text shadow. Có nhiều cách để tạo bóng văn bản trông giống như bóng chèn, nhưng bản thân bóng đổ sẽ không thực sự là bóng chèn.

Kết quả

Đây là kết quả của 2 bóng văn bản từ đoạn mã trên:

Tôi chỉ là một số văn bản trên thế giới với một cái bóng cơ bản.

Tôi chỉ là một số văn bản trong thế giới có hai bóng.

Tags:

Các tin liên quan

Cách tạo hiệu ứng cuộn thị sai với CSS thuần túy trong Chrome
2020-08-03
Cách tạo trang đích có kiểu dáng với CSS Tailwind
2020-06-23
Triển khai một CSS thuần túy có thể thu gọn
2020-05-02
Căn giữa mọi thứ trong CSS bằng Flexbox
2020-05-02
Tham chiếu phông chữ hệ thống CSS
2020-03-29
Sử dụng Thuộc tính chiều cao dòng CSS để cải thiện khả năng đọc
2020-02-04
Cách sử dụng CSS: root Pseudo-Class Selector
2020-01-15
Khi nào bạn nên sử dụng quy tắc CSS! Important?
2020-01-14
Thủ thuật sử dụng CSS translateZ () và phối cảnh ()
2019-12-13
Cách hiển thị CSS trên server ứng dụng React
2019-12-12