p ( text-shadow: 1px 1px 1px #000; )Μπορείτε να εφαρμόσετε πολλές σκιές κειμένου διαχωρίζοντας κόμμα
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Οι δύο πρώτες τιμές καθορίζουν το μήκος της μετατόπισης σκιάς Η πρώτη τιμή καθορίζει την οριζόντια απόσταση και η δεύτερη καθορίζει την κατακόρυφη απόσταση της σκιάς. Η τρίτη τιμή καθορίζει την ακτίνα θαμπώματος και η τελευταία τιμή περιγράφει το χρώμα της σκιάς:
1. τιμή = Η συντεταγμένη Χ
2. τιμή = Η συντεταγμένη Υ
3. τιμή = Η ακτίνα θαμπώματος
4. τιμή = Το χρώμα της σκιάς
Η χρήση θετικών αριθμών ως δύο πρώτες τιμές καταλήγει με την τοποθέτηση της σκιάς στα δεξιά του κειμένου οριζόντια (πρώτη τιμή) και την τοποθέτηση της σκιάς κάτω από το κείμενο κάθετα (δεύτερη τιμή).
Η τρίτη τιμή, η ακτίνα θαμπώματος, είναι μια προαιρετική τιμή που μπορεί να καθοριστεί αλλά δεν χρειάζεται. Είναι το μέγεθος των εικονοστοιχείων που τεντώνεται το κείμενο που προκαλεί ένα αποτέλεσμα θόλωσης. Εάν δεν χρησιμοποιείτε την τρίτη τιμή, αντιμετωπίζεται σαν να καθορίσατε μια ακτίνα θαμπώματος μηδέν.
Επίσης, θυμηθείτε ότι μπορείτε να χρησιμοποιήσετε τιμές RGBa ή HSLa για το χρώμα, για παράδειγμα, διαφάνεια 40% λευκού:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Παραδείγματα
Δείτε τα παραδείγματα σκιών κειμένου Pen Complex του Chris Coyier (@chriscoyier) στο CodePen.
Περισσότερες πληροφορίες
- Έγγραφα MDN
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3.5+ | 9.5+ | 10+ | όποιος | όποιος |