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

Αυτό το ιστολόγιο θα συζητήσει τη μέθοδο εφαρμογής σκιωδών εφέ σε στοιχεία HTML.

Πώς να απορρίψετε το εφέ σκιάς σε στοιχεία HTML χρησιμοποιώντας CSS;

Ο ' κουτί-σκιά Η ιδιότητα ” προσθέτει μια σκιά γύρω από ένα στοιχείο όπου δύο ή περισσότερες προστιθέμενες τιμές εφέ μπορούν να διαχωριστούν με κόμματα.

Η σύνταξη της ιδιότητας box-shadow περιγράφεται παρακάτω.

Σύνταξη

κουτί-σκιά : κανένας |h-offset v-offset θαμπάδα εξάπλωση χρώμα | ένθεση | αρχικός | κληρονομείς ;

Η περιγραφή της προαναφερθείσας σύνταξης παρατίθεται παρακάτω:

' κανένας ”: Είναι η προεπιλεγμένη τιμή της ιδιότητας box-shadow.
' h-offset ”: Αυτή η τιμή αντιπροσωπεύει την οριζόντια απόσταση.
' v-offset ”: Αυτή η τιμή ορίζει την κατακόρυφη απόσταση.
' θολούρα »: Η τρίτη τιμή είναι μια θαμπάδα. Η μεγιστοποίηση της τιμής του θα μεγιστοποιήσει το φαινόμενο θολώματος.
' διάδοση ”: Η τέταρτη τιμή αντιπροσωπεύει την εξάπλωση της σκιάς. Μπορεί να έχει θετικές ή αρνητικές τιμές, όπου η θετική τιμή αυξάνει το spread και μια αρνητική τιμή το μειώνει.
' χρώμα ”: Αυτή η τιμή είναι προαιρετική, αντιπροσωπεύοντας το τρέχον χρώμα.
' αρχικός ”: Αυτή η τιμή ορίζει την ιδιότητα της αρχικής της τιμής.
' κληρονομείς ”: Αυτή η τιμή κληρονομεί την ιδιότητα του γονικού της στοιχείου.
' ένθεση ”: Η τιμή εισαγωγής χρησιμοποιείται για τη δημιουργία σκιών μέσα στο πλαίσιο.

Ας δούμε πώς φαίνεται το εφέ σκιάς μέσα από ένα πρακτικό παράδειγμα.

Παράδειγμα

Στο αρχείο HTML, πρώτα, προσθέστε ένα '

'. Μέσα σε αυτό το στοιχείο

, προσθέστε ετικέτες

και
για να παρέχετε περιεχόμενο στην ιστοσελίδα.

HTML

< div >

< h1 > The Box Shadow < / h1 >

< Π > κουτί-σκιά: 3px 8px < / Π >

< / div >

Τώρα, εφαρμόστε τις ιδιότητες CSS στα προστιθέμενα στοιχεία HTML.

CSS

div {

κουτί-σκιά : 3 εικονοστοιχεία 8 εικονοστοιχεία ;

}

Το στοιχείο div εφαρμόζεται με την ιδιότητα ' κουτί-σκιά “με την τιμή” 3px 8px ”, που αντιπροσωπεύει την οριζόντια μετατόπιση και την κατακόρυφη μετατόπιση.

Παραγωγή

Στην επόμενη ενότητα, τα στοιχεία HTML θα διαμορφωθούν με διαφορετικές ιδιότητες.

CSS

div {

σύνορο : 5 εικονοστοιχεία στερεός rgb ( 255 , 111 , 1 ) ;

κουτί-σκιά : 3 εικονοστοιχεία 8 εικονοστοιχεία 9 εικονοστοιχεία 4px #f4af1b ;

}

Ακολουθούν οι πρόσθετες ιδιότητες CSS που εφαρμόζονται στο στοιχείο div:

' σύνορο Η ιδιότητα λαμβάνει την τιμή 5px συμπαγή rgb(255, 111,1) όπου το 5px υποδηλώνει το πλάτος του περιγράμματος, το solid αντιπροσωπεύει το στυλ του περιγράμματος και το rgb(255, 111, 1) είναι το χρώμα.
' κουτί-σκιά Η ιδιότητα ' με την τιμή 3px 8px 9px 4px #f4af1b αντιπροσωπεύει τη μετατόπιση h ως 3px, τη μετατόπιση v ως 8px, το blur ως 9px, την κατανομή ως 4px και το #f4af1b καθορίζει το χρώμα.

Ο παραπάνω κώδικας θα εμφανίσει το στοιχείο div όπως φαίνεται παρακάτω:

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

HTML

= 'κουτί 1' >

> The Box Shadow >

<σελ > κουτί-σκιά : 3 εικονοστοιχεία 8 εικονοστοιχεία 9 εικονοστοιχεία 4px #f4af1b >

> > >

= 'κουτί 2' >

> The Box Shadow >

<σελ > κουτί-σκιά : 3 εικονοστοιχεία 8 εικονοστοιχεία 9 εικονοστοιχεία 4px #f4af1b >

>

Style box1 div

#κουτί 1 {

πλάτος : 40% ;

ύψος : 140 εικονοστοιχεία ;

σύνορο : 5 εικονοστοιχεία στερεός #ff9c83 ;

κουτί-σκιά : 8 εικονοστοιχεία 10 εικονοστοιχεία 15 εικονοστοιχεία 20 εικονοστοιχεία #807f7f ;

}

Εδώ:

' #κουτί 1 ' χρησιμοποιείται για πρόσβαση στο div με id box1.
' πλάτος Η ιδιότητα ' χρησιμοποιείται για τη ρύθμιση του πλάτους του στοιχείου.
' ύψος Η ιδιότητα ' ορίζει το ύψος του στοιχείου.
' σύνορο ” δίνεται τιμή 5px συμπαγής #ff9c83 όπου 5px υποδηλώνει το πλάτος του περιγράμματος, συμπαγές αντιπροσωπεύει το στυλ του περιγράμματος και #ff9c83 είναι το χρώμα.
' κουτί-σκιά 'η ιδιοκτησία θα οριστεί ως ' 8px 10px 15px 20px #807f7f » όπου 8 εικονοστοιχεία είναι οριζόντια μετατόπιση, 10 εικονοστοιχεία είναι κατακόρυφη μετατόπιση, 15 εικονοστοιχεία είναι το εφέ θολώματος, 20 εικονοστοιχεία είναι εφέ εξάπλωσης και #807f7f είναι το χρώμα της σκιάς.

Style box2 div

#κουτί 2 {

πλάτος : 40% ;

ύψος : 140 εικονοστοιχεία ;

σύνορο : 5 εικονοστοιχεία στερεός rgb ( 255 , 111 , 1 ) ;

κουτί-σκιά : ένθεση 4px 8 εικονοστοιχεία #f4af1b ;

περιθώριο-αριστερά : 350 εικονοστοιχεία ;

}

Μπορεί να παρατηρηθεί ότι έχουμε διαμορφώσει το στυλ του box2 div με τις ίδιες ιδιότητες:

Συμβουλή μπόνους: Προσθήκη πολλαπλών σκιών σε στοιχείο HTML

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

κουτί-σκιά : 6 εικονοστοιχεία 6 εικονοστοιχεία rgb ( 91 , 0 , 143 ) , 12 εικονοστοιχεία 5 εικονοστοιχεία rgb ( 201 , 8 , 8 ) , 16 εικονοστοιχεία 16 εικονοστοιχεία 8 εικονοστοιχεία rgb ( 226 , 213 , 29 ) ;

Όπως μπορείτε να δείτε, πολλαπλές σκιές έχουν εφαρμοστεί με επιτυχία:

Αυτό αφορούσε τη χρήση της σκιάς συνόρων CSS.

συμπέρασμα

Ο ' κουτί-σκιά Η ιδιότητα ' στο CSS χρησιμοποιείται για την εφαρμογή σκιωδών εφέ σε στοιχεία HTML. Αυτή η ιδιότητα αποτελείται κυρίως από δύο τιμές που είναι για οριζόντια μετατόπιση και κάθετη μετατόπιση, αλλά μπορεί να υπάρχουν πολλαπλές τιμές, όπως για εφέ θολώματος, εφέ ακτίνας εξάπλωσης, χρώμα και άλλα. Επιπλέον, μπορείτε επίσης να προσθέσετε πολλαπλές σκιές στα στοιχεία χρησιμοποιώντας κόμματα μεταξύ κάθε ιδιότητας box-shadow. Αυτό το άρθρο έχει εξηγήσει την ιδιότητα CSS box-shadow με πρακτικά παραδείγματα.

Σκιά περιγράμματος CSS