Χρησιμοποιείται στη χύτευση σκιών (συχνά ονομάζεται "Drop Shadows", όπως στο Photoshop) από στοιχεία. Ακολουθεί ένα παράδειγμα με τη βαθύτερη δυνατή υποστήριξη του προγράμματος περιήγησης:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Αυτό:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Η οριζόντια μετατόπιση (απαιτείται) της σκιάς, θετική σημαίνει ότι η σκιά θα είναι στα δεξιά του πλαισίου, μια αρνητική μετατόπιση θα βάλει τη σκιά στα αριστερά του κουτιού.
- Η κατακόρυφη μετατόπιση (απαιτείται) της σκιάς, αρνητική σημαίνει ότι η σκιά θα είναι πάνω από το κουτί, θετική σημαίνει ότι η σκιά θα είναι κάτω από το κουτί.
- Η ακτίνα θαμπώματος (απαιτείται), αν οριστεί στο 0, η σκιά θα είναι οξεία, όσο υψηλότερος είναι ο αριθμός, τόσο πιο θαμπή θα είναι και όσο πιο μακριά θα επεκταθεί η σκιά. Για παράδειγμα, μια σκιά με 5px οριζόντια μετατόπιση που έχει επίσης μια ακτίνα θαμπώματος 5px θα είναι 10px της συνολικής σκιάς.
- Η ακτίνα εξάπλωσης (προαιρετικά), οι θετικές τιμές αυξάνουν το μέγεθος της σκιάς, οι αρνητικές τιμές μειώνουν το μέγεθος. Η προεπιλογή είναι 0 (η σκιά έχει το ίδιο μέγεθος με τη θαμπάδα).
- Χρώμα (απαιτείται) - λαμβάνει οποιαδήποτε τιμή χρώματος, όπως hex, με όνομα, rgba ή hsla. Εάν η τιμή χρώματος παραλείπεται, οι σκιές κουτιού σχεδιάζονται στο χρώμα προσκηνίου (κείμενο
color). Αλλά να γνωρίζετε, τα παλαιότερα προγράμματα περιήγησης WebKit (προ Chrome 20 και Safari 6) αγνοούν τον κανόνα όταν παραλείπεται το χρώμα.
Η χρήση ενός ημιδιαφανούς χρώματος rgba(0, 0, 0, 0.4)είναι πιο συνηθισμένη και ένα ωραίο αποτέλεσμα, καθώς δεν καλύπτει εντελώς / αδιαφανώς αυτό που έχει τελειώσει, αλλά επιτρέπει σε ό, τι από κάτω να εμφανίζεται λίγο, σαν μια πραγματική σκιά.
Παράδειγμα
Εσωτερική σκιά
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Παράδειγμα
Internet Explorer (8 και κάτω) Box Shadow
Χρειάζεστε ένα επιπλέον στοιχείο, αλλά μπορεί να γίνει filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Μόνο μία πλευρά
Χρησιμοποιώντας μια αρνητική ακτίνα εξάπλωσης, μπορείτε να πιέσετε σε μια σκιά κουτιού και να την σπρώξετε μόνο από τη μία άκρη ενός κουτιού.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Πολλαπλά σύνορα και άλλα
Μπορείτε να διαχωρίσετε το κόμμα με σκιά όσες φορές θέλετε. Για παράδειγμα, αυτό δείχνει δύο σκιές με διαφορετικές θέσεις και διαφορετικά χρώματα στο ίδιο στοιχείο:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Το παράδειγμα δείχνει πώς μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε πολλά σύνορα:
Δείτε το δροσερό πλαίσιο πολλαπλών σκιών στυλό! από τον Chris Coyier (@chriscoyier) στο CodePen.
Εφαρμόζοντας τις σκιές σε ψευδο στοιχεία τα οποία στη συνέχεια χειρίζεστε, μπορείτε να πάρετε μερικές πολύ φανταχτερές σκιές 3D.
Δείτε το Pen CSS3 Box Shadows Effects από τον Halil İbrahim Nuroğlu (@haibnu) στο CodePen.
Εξαιρετικά ομαλές σκιές μέσω πολλαπλών τιμών διαχωρισμένων με κόμμα:
Δείτε το στυλό
κουτί στυλό του Chris Coyier (@chriscoyier)
στο CodePen.
Υποστήριξη προγράμματος περιήγησης
Δείτε το απόσπασμα στο επάνω μέρος της σελίδας για λεπτομέρειες σχετικά με την κάλυψη προθέματος προμηθευτή. Αυτή είναι μια από αυτές τις ιδιότητες όπου η κατάργηση των προθεμάτων είναι αρκετά λογική σε αυτό το σημείο.