Πώς να χρησιμοποιήσετε το CSS box-shadow: 13 κόλπα και παραδείγματα

Το CSS είναι η γλώσσα που χρησιμοποιούν οι προγραμματιστές για να διαμορφώσουν μια ιστοσελίδα. Ελέγχει τον τρόπο εμφάνισης των στοιχείων HTML σε μια οθόνη, σε χαρτί ή σε οποιαδήποτε άλλη μορφή πολυμέσων. Το CSS παρέχει την πλήρη δύναμη προσαρμογής για τη διαμόρφωση της ιστοσελίδας στη δική σας εικόνα.

Μπορείτε να αλλάξετε το χρώμα φόντου ενός στοιχείου, το στυλ γραμματοσειράς, το χρώμα γραμματοσειράς, τη σκιά του πλαισίου, το περιθώριο και πολλές άλλες ιδιότητες χρησιμοποιώντας το CSS. Θα σας παρουσιάσουμε μερικές αποτελεσματικές χρήσεις του box-shadow σε αυτόν τον οδηγό.

Τι είναι το CSS box-shadow;

ο κουτί-σκιά η ιδιότητα χρησιμοποιείται για την εφαρμογή σκιάς σε στοιχεία HTML. Είναι μια από τις πιο χρησιμοποιούμενες ιδιότητες CSS για στυλ κουτιών ή εικόνων.

Σύνταξη CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

οριζόντια μετατόπιση: Εάν η οριζόντια μετατόπιση είναι θετική, η σκιά θα είναι στα δεξιά του κουτιού. Και αν η οριζόντια μετατόπιση είναι αρνητική, η σκιά θα είναι στα αριστερά του κουτιού.
κάθετη μετατόπιση: Εάν η κατακόρυφη μετατόπιση είναι θετική, η σκιά θα είναι κάτω από το πλαίσιο. Και αν η κατακόρυφη μετατόπιση είναι αρνητική, η σκιά θα είναι πάνω από το πλαίσιο.
ακτίνα θόλωσης: Όσο υψηλότερη είναι η τιμή, τόσο πιο θολή θα είναι η σκιά.
ακτίνα εξάπλωσης: Δηλώνει πόσο πρέπει να απλώνεται η σκιά. Οι θετικές τιμές αυξάνουν το spread της σκιάς, οι αρνητικές τιμές μειώνουν το spread.
Χρώμα: Δηλώνει το χρώμα της σκιάς. Επίσης, υποστηρίζει οποιαδήποτε μορφή χρώματος όπως rgba, hex ή hsla.

Οι παράμετροι θολούρας, εξάπλωσης και χρώματος είναι προαιρετικές. Το πιο ενδιαφέρον μέρος του κουτιού-σκιάς είναι ότι μπορείτε να χρησιμοποιήσετε ένα κόμμα για να διαχωρίσετε τις τιμές σκιάς του κουτιού ανά πάσα στιγμή. Αυτό μπορεί να χρησιμοποιηθεί για τη δημιουργία πολλαπλών περιγραμμάτων και σκιών στα στοιχεία.

1. Προσθέστε ένα Dim-box σκιά στα αριστερά, δεξιά και κάτω μέρος του κουτιού

Μπορείτε να προσθέσετε πολύ αμυδρές σκιές σε τρεις πλευρές (αριστερά, δεξιά και κάτω) του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο CSS-πλαίσιο με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Παραγωγή:

2. Προσθέστε ένα κουτί σκιάς Dim σε όλες τις πλευρές

Μπορείτε να προσθέσετε φωτεινές σκιές σε όλες τις πλευρές του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο CSS-πλαίσιο με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Παραγωγή:

3. Προσθέστε μια λεπτή σκιά κουτιού στην κάτω και δεξιά πλευρά

Μπορείτε να προσθέσετε σκιές στην κάτω και δεξιά πλευρά του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο CSS-πλαίσιο με το στοχευόμενο στοιχείο HTML:

μεταφορά μηνυμάτων κειμένου σε νέο τηλέφωνο

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Παραγωγή:

4. Προσθέστε ένα Dark box-shadow σε όλες τις πλευρές

Μπορείτε να προσθέσετε σκοτεινή σκιά σε όλες τις πλευρές του πλαισίου χρησιμοποιώντας το ακόλουθο CSS πλαίσιο σκιάς με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Παραγωγή:

5. Προσθήκη Spread Shadow σε όλες τις πλευρές

Μπορείτε να προσθέσετε spread σκιά σε όλες τις πλευρές του πλαισίου χρησιμοποιώντας την ακόλουθη εντολή με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

Παραγωγή:

6. Προσθέστε μια λεπτή σκιά περιγράμματος σε όλες τις πλευρές

Μπορείτε να προσθέσετε μια απλή σκιά περιγράμματος σε όλες τις πλευρές του πλαισίου χρησιμοποιώντας το ακόλουθο CSS με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Παραγωγή:

7. Προσθέστε ένα πλαίσιο-σκιά στην Κάτω και Αριστερή πλευρά

Μπορείτε να προσθέσετε μια σκιά στην κάτω και αριστερή πλευρά του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο CSS-πλαίσιο με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Παραγωγή:

8. Προσθέστε ένα κουτί σκιά Dim στην επάνω και αριστερή πλευρά, Dark Shadow στην κάτω και δεξιά πλευρά

Μπορείτε να προσθέσετε μια ανοιχτόχρωμη σκιά στην επάνω και αριστερή πλευρά του πλαισίου καθώς και μια σκούρα σκιά στην κάτω και δεξιά πλευρά του πλαισίου χρησιμοποιώντας το ακόλουθο CSS με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Παραγωγή:

9. Προσθέστε μια λεπτή, έγχρωμη σκιά περιγράμματος σε όλες τις πλευρές

Μπορείτε να προσθέσετε μια απλή έγχρωμη σκιά περιγράμματος σε όλες τις πλευρές του πλαισίου χρησιμοποιώντας το ακόλουθο CSS πλαίσιο σκιάς με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Παραγωγή:

10. Προσθέστε σκιές περιγράμματος πολλαπλών χρωμάτων στην κάτω και αριστερή πλευρά του κουτιού

Μπορείτε να προσθέσετε πολλές έγχρωμες σκιές περιγράμματος στην κάτω και αριστερή πλευρά του πλαισίου χρησιμοποιώντας το ακόλουθο CSS με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Παραγωγή:

μπορεί να εντοπιστεί η ιδιωτική περιήγηση στο iphone

11. Προσθέστε πολλές σκιές περιγράμματος χρωμάτων στο κάτω μέρος

Μπορείτε να προσθέσετε πολλές έγχρωμες σκιές περιγράμματος στο κάτω μέρος του πλαισίου χρησιμοποιώντας το ακόλουθο πλαίσιο CSS-πλαίσιο με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

Παραγωγή:

12. Προσθέστε πολλές χρωματιστές σκιές περιγράμματος στην κάτω και δεξιά πλευρά του κουτιού

Μπορείτε να προσθέσετε πολλές έγχρωμες σκιές περιγράμματος στην κάτω και δεξιά πλευρά του πλαισίου χρησιμοποιώντας το ακόλουθο CSS με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

Παραγωγή:

13. Προσθέστε ελαφριές σκιές στην αριστερή και δεξιά πλευρά, απλώστε τη σκιά στο κάτω μέρος

Μπορείτε να προσθέσετε ανοιχτόχρωμες σκιές στην αριστερή και τη δεξιά πλευρά και να απλώσετε σκιά στο κάτω μέρος του πλαισίου χρησιμοποιώντας το ακόλουθο CSS-πλαίσιο σκιάς με το στοχευόμενο στοιχείο HTML:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Παραγωγή:

Ενσωμάτωση CSS με μια σελίδα HTML

Τώρα ξέρετε πώς να προσθέτετε δροσερά εφέ σκιών με χρήση CSS, μπορείτε εύκολα να τα ενσωματώσετε με στοιχεία HTML με πολλούς τρόπους.

Σχετίζεται με: 11 Χρήσιμα εργαλεία για τον έλεγχο, τον καθαρισμό και τη βελτιστοποίηση αρχείων CSS

Μπορείτε να το ενσωματώσετε στην ίδια τη σελίδα HTML ή να το επισυνάψετε ως ξεχωριστό έγγραφο. Υπάρχουν τρεις τρόποι για να συμπεριλάβετε το CSS σε ένα έγγραφο HTML:

Εσωτερικό CSS

Ενσωματωμένα ή εσωτερικά φύλλα στυλ εισάγονται μέσα στο τμήμα ενός εγγράφου HTML χρησιμοποιώντας το στοιχείο. Μπορείτε να δημιουργήσετε οποιονδήποτε αριθμό στοιχεία σε ένα έγγραφο HTML, αλλά πρέπει να περικλείονται μεταξύ του και ετικέτες. Ακολουθεί ένα παράδειγμα που δείχνει πώς μπορείτε να χρησιμοποιήσετε το εσωτερικό CSS με ένα έγγραφο HTML:

  
  
  
  
 CSS box-shadow  
  
 .heading {  
 text-align: center;  
 }  
 .image-box {  
 display: block;  
 margin-left: auto;  
 margin-right: auto;  
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  
 }  
  
  
  
  
 Style 4

Ενσωματωμένο CSS

Το ενσωματωμένο CSS χρησιμοποιείται για την προσθήκη μοναδικών κανόνων στυλ σε ένα στοιχείο HTML. Μπορεί να χρησιμοποιηθεί με ένα στοιχείο HTML μέσω του στυλ Χαρακτηριστικό. Το χαρακτηριστικό στυλ περιέχει ιδιότητες CSS με τη μορφή 'αξία περιουσίας' χωρίζεται με ερωτηματικό ( ? ).

Σχετικά: Μάθετε πώς μπορείτε να δημιουργήσετε δισδιάστατους ιστότοπους με πλέγμα CSS

Όλες οι ιδιότητες του CSS πρέπει να βρίσκονται σε μία γραμμή, δηλαδή δεν πρέπει να υπάρχουν διακοπή γραμμών μεταξύ των ιδιοτήτων του CSS. Ακολουθεί ένα παράδειγμα που δείχνει πώς μπορείτε να χρησιμοποιήσετε το ενσωματωμένο CSS με ένα έγγραφο HTML:

  
  
  
  
 CSS box-shadow  
  
  
  
 Style 4

Εξωτερικό CSS

Το εξωτερικό CSS είναι ο ιδανικότερος τρόπος εφαρμογής στυλ σε έγγραφα HTML. Ένα εξωτερικό φύλλο στυλ περιέχει όλους τους κανόνες στυλ σε ένα ξεχωριστό έγγραφο (αρχείο .css), το έγγραφο αυτό στη συνέχεια συνδέεται με το έγγραφο HTML χρησιμοποιώντας το ετικέτα. Αυτή η μέθοδος είναι η καλύτερη μέθοδος για τον καθορισμό και την εφαρμογή στυλ στα έγγραφα HTML καθώς το επηρεαζόμενο αρχείο HTML απαιτεί ελάχιστες αλλαγές στη σήμανση. Ακολουθεί ένα παράδειγμα που δείχνει πώς μπορείτε να χρησιμοποιήσετε εξωτερικό CSS με ένα έγγραφο HTML:

Δημιουργήστε ένα νέο αρχείο CSS με το .css επέκταση. Τώρα προσθέστε τον ακόλουθο κώδικα CSS μέσα σε αυτό το αρχείο:

.heading {  
 text-align: center;  
}  
.image-box {  
 display: block;  
 margin-left: auto;  
 margin-right: auto;  
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  
}

Τέλος, δημιουργήστε ένα έγγραφο HTML και προσθέστε τον ακόλουθο κώδικα μέσα σε αυτό το έγγραφο:

πώς να εισαγάγετε υδατογράφημα στα έγγραφα της Google

  
  
  
  
 CSS box-shadow  
  
  
  
  
 Style 4

Λάβετε υπόψη ότι το αρχείο CSS συνδέεται με το έγγραφο HTML μέσω ετικέτα και href Χαρακτηριστικό.

Όλες οι παραπάνω τρεις μέθοδοι (Εσωτερικό CSS, Inline CSS και Εξωτερικό CSS) θα εμφανίζουν την ίδια έξοδο-

Κάντε την ιστοσελίδα σας κομψή με CSS

Χρησιμοποιώντας το CSS έχετε τον πλήρη έλεγχο του στυλ της ιστοσελίδας σας. Μπορείτε να προσαρμόσετε κάθε στοιχείο HTML χρησιμοποιώντας διάφορες ιδιότητες CSS. Οι προγραμματιστές από όλο τον κόσμο συμβάλλουν στις ενημερώσεις CSS και το κάνουν από την κυκλοφορία του το 1996. Ως εκ τούτου, οι αρχάριοι έχουν πολλά να μάθουν!

Ευτυχώς, το CSS είναι φιλικό για αρχάριους. Μπορείτε να αποκτήσετε εξαιρετική πρακτική ξεκινώντας με μερικές απλές εντολές και βλέποντας πού σας οδηγεί η δημιουργικότητά σας.

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ 10 απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά

Χρειάζεστε βοήθεια με το CSS; Δοκιμάστε αυτά τα βασικά παραδείγματα κώδικα CSS για να ξεκινήσετε και, στη συνέχεια, εφαρμόστε τα στις δικές σας ιστοσελίδες.

Διαβάστε Επόμενο Σχετικά θέματα

Προγραμματισμός
Σχεδιασμός Ιστού
CSS

Σχετικά με τον Συγγραφέα Γιουβράι Τσάντρα(Δημοσιεύθηκαν 60 άρθρα)

Ο Yuvraj είναι προπτυχιακός φοιτητής Πληροφορικής στο Πανεπιστήμιο του Δελχί, Ινδία. Είναι παθιασμένος με το Full Stack Web Development. Όταν δεν γράφει, διερευνά το βάθος διαφορετικών τεχνολογιών.

Περισσότερα από τον Yuvraj Chandra

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή