Πώς να το χρησιμοποιήσετε
- Ξεκινήστε από μια προεπιλογή ή προσαρμόστε τη μετατόπιση, τη θόλωση, το spread, το χρώμα και την αδιαφάνεια του πρώτου επιπέδου.
- Προσθέστε περισσότερα επίπεδα για πιο φυσικό βάθος ή επιλέξτε «Inset» για εσωτερική σκιά.
- Αλλάξτε το φόντο προεπισκόπησης και το χρώμα του κουτιού για να ταιριάζουν με το σχέδιό σας και μετά αντιγράψτε το CSS.
Πώς λειτουργεί
Το box-shadow δέχεται, ανά επίπεδο: οριζόντια μετατόπιση, κατακόρυφη μετατόπιση, ακτίνα θόλωσης, ακτίνα επέκτασης και χρώμα, προαιρετικά με το inset πριν. Οι θετικές μετατοπίσεις μετακινούν τη σκιά δεξιά και κάτω. Η θόλωση μαλακώνει την άκρη και δεν μπορεί να είναι αρνητική· η επέκταση μεγαλώνει (θετική) ή μικραίνει (αρνητική) τη σκιά πριν από τη θόλωση. Πολλά επίπεδα χωρίζονται με κόμματα και το πρώτο σχεδιάζεται πάνω από τα υπόλοιπα.
Η ρεαλιστική ανύψωση συνήθως συνδυάζει μια μικρή, έντονη σκιά με μια μεγαλύτερη, πιο απαλή σε χαμηλή αδιαφάνεια· αυτό κάνει η προεπιλογή «Elevated». Τα χρώματα γράφονται ως rgba() ώστε η αδιαφάνεια να είναι ρητή. Οι σκιές ακολουθούν το border-radius του στοιχείου και δεν καταλαμβάνουν χώρο στη διάταξη, επομένως δεν μετακινούν ποτέ άλλα στοιχεία.
Σκιές με πολύ μεγάλες τιμές θόλωσης σε πολλά στοιχεία μπορεί να κάνουν την κύλιση πιο αργή σε τηλέφωνα χαμηλών επιδόσεων. Αν κάνετε κίνηση σε μια σκιά, συνήθως είναι πιο ομαλό να εμφανίσετε με fade-in ένα ψευδοστοιχείο που έχει ήδη τη σκιά, παρά να κάνετε κίνηση στο ίδιο το box-shadow.
Παραδείγματα
Κάρτα σε ανοιχτόχρωμη σελίδα
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); δίνει σε μια κάρτα καθαρή άκρη και απαλή ανύψωση.
Δακτύλιος εστίασης χωρίς μετατόπιση διάταξης
Ένα επίπεδο με μετατόπιση 0, θόλωση 0 και επέκταση 3px στο χρώμα της επωνυμίας σας σχεδιάζει έναν συμπαγή δακτύλιο γύρω από ένα κουμπί. Σε αντίθεση με το border, δεν αλλάζει το μέγεθος του στοιχείου.
Πατημένο πεδίο εισαγωγής
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) κάνει ένα πεδίο κειμένου να φαίνεται ελαφρώς βυθισμένο.
Συχνές ερωτήσεις
Ποια είναι η διαφορά μεταξύ box-shadow και filter: drop-shadow();
Το box-shadow ακολουθεί το πλαίσιο και το border-radius του στοιχείου και υποστηρίζει spread και inset. Το drop-shadow() ακολουθεί το ορατό σχήμα, συμπεριλαμβανομένων των διαφανών περιοχών εικόνων PNG ή SVG, αλλά δεν έχει spread ούτε inset.
Γιατί κόβεται η σκιά μου;
Ένα γονικό στοιχείο με overflow: hidden αποκόπτει οτιδήποτε βρίσκεται έξω από το πλαίσιό του, συμπεριλαμβανομένων των σκιών. Προσθέστε padding στο γονικό στοιχείο ή μετακινήστε τον κανόνα overflow.
Πόσα επίπεδα πρέπει να χρησιμοποιήσω;
Ένα ή δύο επίπεδα είναι αρκετά για τις περισσότερες διεπαφές. Περισσότερα επίπεδα μπορεί να δείχνουν πιο ομαλά, αλλά κοστίζουν λίγο περισσότερο στην απόδοση, κάτι που έχει σημασία σε μεγάλες λίστες.
Απόρρητο
Το CSS δημιουργείται στο πρόγραμμα περιήγησής σας. Τίποτα δεν μεταφορτώνεται ούτε αποθηκεύεται.