Hãy nhìn dòng chữ dưới đây:
Bạn có thể thấy nó được đổ bóng với màu xanh. Code mẫu:
text-shadow: 4px 5px 6px blue;
Giải thích code:
- Giá trị đầu tiên 4px là khoảng cách dịch từ bên trái sang theo phương nằm ngang
- Giá trị thứ hai 5px là khoảng cách dịch từ trên xuống theo hướng thẳng đứng
- Giá trị thứ ba 6px là độ mờ (blur) của bóng
- Cuối cùng là màu sắc của bóng
- Bạn có thể để giá trị âm nếu muốn cho chiều ngang và đứng, dĩ nhiên nó sẽ ngược lại giá trị dương. Nếu để âm cho giá trị blur bạn sẽ không còn thấy bóng nữa!
Như vậy cú pháp của đổ bóng cho văn bản là:
text-shadow: lệch-ngang lệch-đứng độ-mờ màu-sắc;
Nếu không có giá trị thứ ba, tức là không có độ mờ, chúng ta sẽ thấy như có 2 văn bản sinh đôi được đặt cạnh nhau:
Văn Bản Này Không Có Giá Trị BlurTrông rất khó coi, trừ khi bạn giảm giá trị dịch chuyển xuống 1px - 2px theo cả 2 chiều...
Nếu muốn đổ bóng cho hộp, bạn dùng thuộc tính box-shadow.
No comments:
Post a Comment