CSS Text Shadow - Thủ thuật CSS

Anonim

Bóng văn bản thông thường:

p ( text-shadow: 1px 1px 1px #000; )

Nhiều bóng:

p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )

Hai giá trị đầu tiên chỉ định độ dài của phần bù bóng. Giá trị đầu tiên chỉ định khoảng cách ngang và giá trị thứ hai chỉ định khoảng cách dọc của bóng. Giá trị thứ ba chỉ định bán kính mờ và giá trị cuối cùng mô tả màu sắc của bóng:

1. giá trị = Tọa độ X
2. giá trị = Tọa độ Y
3. giá trị = Bán kính mờ
4. giá trị = Màu của bóng

Sử dụng số dương làm hai giá trị đầu tiên kết thúc bằng việc đặt bóng ở bên phải văn bản theo chiều ngang (giá trị đầu tiên) và đặt bóng bên dưới văn bản theo chiều dọc (giá trị thứ hai).

Giá trị thứ ba, bán kính mờ, là một giá trị tùy chọn có thể được chỉ định nhưng không bắt buộc. Đó là số lượng pixel mà văn bản bị kéo dài gây ra hiệu ứng mờ. Nếu bạn không sử dụng giá trị thứ ba, nó được coi như thể bạn chỉ định bán kính mờ bằng 0.

Ngoài ra, hãy nhớ rằng bạn có thể sử dụng các giá trị RGBA cho màu, ví dụ: độ trong suốt 40% của màu trắng:

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