Χρησιμοποιείται για την απομάκρυνση σκιών από στοιχεία επιπέδου μπλοκ (όπως divs).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Η οριζόντια μετατόπιση της σκιάς, θετική σημαίνει ότι η σκιά θα είναι στα δεξιά του κουτιού, μια αρνητική μετατόπιση θα βάλει τη σκιά στα αριστερά του κουτιού.
- Η κατακόρυφη μετατόπιση της σκιάς, μια αρνητική σημαίνει ότι η σκιά θα είναι πάνω από το κουτί, μια θετική σημαίνει ότι η σκιά θα είναι κάτω από το πλαίσιο.
- Η ακτίνα θαμπώματος (προαιρετικά), αν οριστεί στο 0, η σκιά θα είναι έντονη, όσο υψηλότερος είναι ο αριθμός, τόσο πιο θαμπή θα είναι.
- Η ακτίνα εξάπλωσης (προαιρετικά), οι θετικές τιμές αυξάνουν το μέγεθος της σκιάς, οι αρνητικές τιμές μειώνουν το μέγεθος. Η προεπιλογή είναι 0 (η σκιά έχει το ίδιο μέγεθος με τη θαμπάδα).
- Χρώμα
Παράδειγμα
Εσωτερική σκιά
.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
Χρειάζεστε επιπλέον στοιχεία…
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 ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )Σχετιζομαι με
- CSS3: τιμή spread και box-shadow μόνο στη μία πλευρά
- Έγγραφα Mozilla
- Πολλαπλά σύνορα με
box-shadow.