Γεννήτρια πλαισίου-σκιάς CSS
Δημιουργήστε οπτικά τις τιμές πλαισίου-σκιάς.
Πώς να δημιουργήσετε μια σκιά πλαισίου
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 εικονοστοιχεία — σκληρή άκρη σαν αυτοκόλλητο σηκωμένη ελαφρώς από τη σελίδα.
Πατημένο κουμπί εισαγωγής
Ενεργοποίηση εισαγωγής με μικρό θάμπωμα — προσομοιώνει ένα πιεσμένο ή σε εσοχή χειριστήριο μέσα στο στοιχείο.
Πότε να χρησιμοποιήσετε αυτό το εργαλείο
• Όταν συντονίζετε το βάθος διεπαφής χρήστη για κάρτες, μοντέλα και κουμπιά.
• Όταν μαθαίνετε πώς διαφέρει η θαμπάδα από την εξάπλωση.
• Όταν τεκμηριώνετε διακριτικά σχεδίασης με ακριβείς τιμές σκιάς.
Ανάγνωση των τεσσάρων αριθμών
box-shadow: 0 8px 24px 0,px 0, blur = 8px, x=0 spread=0. Παράλειψη εξάπλωσης και προεπιλεγμένη εξάπλωση του προγράμματος περιήγησης στο 0. Το μεγάλο θάμπωμα με μηδενική μετατόπιση δημιουργεί λάμψη. Η μεγάλη μετατόπιση με μικρό θάμπωμα δημιουργεί κατευθυντικό φως.
Συχνές ερωτήσεις
Ποια είναι η σύνταξη box-shadow;
box-shadow: offset-x offset-y blur-radius spread-radius color; Η προαιρετική ένθετη λέξη-κλειδί δημιουργεί μια εσωτερική σκιά.
Θάμπωμα έναντι εξάπλωσης;
Το θάμπωμα μαλακώνει την άκρη της σκιάς. Το Spread διαστέλλει ή συστέλλει το σχήμα της σκιάς πριν το θάμπωμα — το θετικό άπλωμα μεγεθύνεται, το αρνητικό συρρικνώνεται.
Ποιες μονάδες πρέπει να χρησιμοποιήσω;
Αυτό το εργαλείο εξάγει pixel (px), την πιο κοινή επιλογή για σκιές περιβάλλοντος χρήστη οθόνης.
Τι κάνει το ένθετο;
Το Inset σχεδιάζει τη σκιά μέσα στο πλαίσιο περιγράμματος στοιχείου — χρήσιμο για βυθισμένες εισόδους ή φρεάτια.
Μπορεί το χρώμα της σκιάς να είναι ημιδιαφανές;
Ναι. Η αδιαφάνεια εφαρμόζεται στο επιλεγμένο χρώμα, παράγοντας έξοδο rgba για λείες άκρες σε διάφορα φόντα.