Γεννήτρια πλαισίου-σκιάς CSS
Δημιουργήστε οπτικά τις τιμές πλαισίου-σκιάς. Ρυθμίστε την οριζόντια και την κατακόρυφη μετατόπιση σε pixel, την ακτίνα θαμπώματος (μαλακή άκρη), την εξάπλωση (μεγέθυνση ή συρρίκνωση της σκιάς πριν από το θάμπωμα), το χρώμα, την αδιαφάνεια και την προαιρετική ένθεση για τις εσωτερικές σκιές. Το πλαίσιο προεπισκόπησης ενημερώνεται ζωντανά. αντιγράψτε την πλήρη δήλωση box-shadow στο CSS σας. Κατανοήστε πώς κάθε παράμετρος αλλάζει την ανύψωση και το βάθος χωρίς δοκιμή και σφάλμα στα devtools.
X (px)
Y (px)
Θόλωμα (px)
Εξάπλωση (px)
Χρώμα
Αδιαφάνεια (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
Πώς να δημιουργήσετε μια σκιά πλαισίου
1. Ορίστε μετατόπιση X και Y — το θετικό X μετακινεί τη σκιά δεξιά, το θετικό Y τη μετακινεί προς τα κάτω.
2. Προσαρμόστε το θάμπωμα (απαλότητα) και την εξάπλωση (μέγεθος πριν από το θάμπωμα).
3. Επιλέξτε το χρώμα της σκιάς και την αδιαφάνεια.
4. Πρέπει να εμφανιστεί η εναλλαγή εντός του πλαισίου. αντιγράψτε το CSS.
Σιωμένες συνταγές
Απαλή ανύψωση κάρτας
offsetY 8px, θάμπωμα 24px, spread 0, μαύρο σε αδιαφάνεια 18% — μια αιωρούμενη κάρτα σε στυλ υλικού: box-shadow: 8px24p rgba(20,20,20,0.18).
Αιχμηρή πτώση σκιά
θάμπωμα 0, εξάπλωση 0, μετατόπισηY 4 εικονοστοιχεία — σκληρή άκρη σαν αυτοκόλλητο σηκωμένη ελαφρώς από τη σελίδα.
Πατημένο κουμπί εισαγωγής
Ενεργοποίηση εισαγωγής με μικρό θάμπωμα — προσομοιώνει ένα πιεσμένο ή σε εσοχή χειριστήριο μέσα στο στοιχείο.
Πότε να χρησιμοποιήσετε αυτό το εργαλείο
• Όταν συντονίζετε το βάθος διεπαφής χρήστη για κάρτες, μοντέλα και κουμπιά.
• Όταν μαθαίνετε πώς διαφέρει η θαμπάδα από την εξάπλωση.
• Όταν τεκμηριώνετε διακριτικά σχεδίασης με ακριβείς τιμές σκιάς.
Πότε να επιλέξετε κάτι άλλο
• Όταν χρειάζεστε πολλές στοιβαγμένες σκιές — αντιγράψτε το πρώτο επίπεδο εδώ και, στη συνέχεια, προσθέστε περισσότερες στο CSS.
• Όταν θέλετε text-shadow — διαφορετική ιδιότητα με παρόμοια σύνταξη.
• Όταν χρειάζεστε drop-shadow σε ακανόνιστα σχήματα PNG — φίλτρο: drop-shadow() μπορεί να λειτουργήσει καλύτερα.
Ανάγνωση των τεσσάρων αριθμών
box-shadow: 0 8px 24px 0,px 0, blur = 8px, x=0 spread=0. Παράλειψη εξάπλωσης και προεπιλεγμένη εξάπλωση του προγράμματος περιήγησης στο 0. Το μεγάλο θάμπωμα με μηδενική μετατόπιση δημιουργεί λάμψη. Η μεγάλη μετατόπιση με μικρό θάμπωμα δημιουργεί κατευθυντικό φως.
Διαμόρφωση σκιών
Διαχωρίστε πολλαπλές σκιές με κόμματα: box-shadow: 0 1px 2px rgba(0,0,0,0,1), 0 4px 12px,50,rgba; Τα πρώτα χρώματα σκιάς κάτω από τα επόμενα. Συνδυάστε μια σφιχτή σκοτεινή σκιά με μια ανοιχτόχρωμη για ρεαλιστικό βάθος.
Προσβασιμότητα και απόδοση
Οι βαριές σκιές σε μεγάλες κινούμενες περιοχές μπορεί να κοστίσουν χρόνο βαφής της GPU. Προτιμήστε τις λεπτές σκιές για διεπαφή χρήστη με πυκνότητα δεδομένων. Βεβαιωθείτε ότι τα εστιασμένα στοιχεία παραμένουν ορατά — μην βασίζεστε μόνο στη σκιά για την εμφάνιση της κατάστασης. ζεύγη με περίγραμμα ή περίγραμμα για χρήστες πληκτρολογίου.
Συχνές ερωτήσεις
Ποια είναι η σύνταξη box-shadow;
box-shadow: offset-x offset-y blur-radius spread-radius color; Η προαιρετική ένθετη λέξη-κλειδί δημιουργεί μια εσωτερική σκιά.
Θάμπωμα έναντι εξάπλωσης;
Το θάμπωμα μαλακώνει την άκρη της σκιάς. Το Spread διαστέλλει ή συστέλλει το σχήμα της σκιάς πριν το θάμπωμα — το θετικό άπλωμα μεγεθύνεται, το αρνητικό συρρικνώνεται.
Ποιες μονάδες πρέπει να χρησιμοποιήσω;
Αυτό το εργαλείο εξάγει pixel (px), την πιο κοινή επιλογή για σκιές περιβάλλοντος χρήστη οθόνης.
Τι κάνει το ένθετο;
Το Inset σχεδιάζει τη σκιά μέσα στο πλαίσιο περιγράμματος στοιχείου — χρήσιμο για βυθισμένες εισόδους ή φρεάτια.
Μπορεί το χρώμα της σκιάς να είναι ημιδιαφανές;
Ναι. Η αδιαφάνεια εφαρμόζεται στο επιλεγμένο χρώμα, παράγοντας έξοδο rgba για λείες άκρες σε διάφορα φόντα.
Αποστέλλονται τιμές σε server;
Όχι. Η προεπισκόπηση και το CSS είναι τοπικά.
Είναι δωρεάν;
Ναι. Χρησιμοποιήστε το χωρίς λογαριασμό και χωρίς όριο.