CSS drop-shadow() συναρτηση

Ορισμός και χρήση

CSS drop-shadow() η συνάρτηση φίλτρου εφαρμόζει την επίδραση σκιάς στις εικόνες.

παράδειγμα

παράδειγμα 1

Προσθέστε διαφορετικές επιδράσεις σκιάς στις εικόνες:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

δοκιμάστε το προσωπικά

παράδειγμα 2

Προσθέστε διαφορετικές επιδράσεις σκιάς στις εικόνες (χρησιμοποιώντας αρνητικές τιμές για τις κατακόρυφες και οριζόντιες σκιάς):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

δοκιμάστε το προσωπικά

CSS γραμματική

drop-shadow(h-shadow v-shadow blur spread χρώμα)
τιμή περιγραφή
h-shadow

απαιτητικό. Καθορίστε την τιμή pixel της οριζόντιας σκιάς.

αρνητικές τιμές θα τοποθετήσουν τη σκιά αριστερά από την εικόνα.
v-shadow

απαιτητικό. Καθορίστε την τιμή pixel της κατακόρυφης σκιάς.

αρνητικές τιμές θα τοποθετήσουν τη σκιά πάνω από την εικόνα.
blur

προαιρετικό. Προσθέστε μπλεγμένη επίδραση στη σκιά, η μονάδα είναι pixel.

Η μεγαλύτερη τιμή, η πιο έντονη η μπλεγμένη επίδραση (η σκιά θα γίνει μεγαλύτερη και πιο αχνή).

Δεν επιτρέπεται η χρήση αρνητικών τιμών.

Αν δεν καθοριστεί τιμή, τότε το προεπιλεγμένο είναι 0 (η κύρια γωνία της σκιάς είναι καθαρή).
spread

προαιρετικό. Πρέπει να είναι τιμή σε pixel.

θετικές τιμές θα επεκτείνουν τη σκιά και θα την κάνουν μεγαλύτερη, αρνητικές τιμές θα κάνουν τη σκιά μικρότερη.

Αν δεν καθοριστεί, τότε το προεπιλεγμένο είναι 0 (η σκιά είναι ίση με το μέγεθος του στοιχείου).
χρώμα

προαιρετικό. Προσθέστε χρώμα στη σκιά.

Αν δεν καθοριστεί, το χρώμα εξαρτάται από το πρόγραμμα περιήγησης (συνήθως μαύρο).

τεχνικά λεπτομέρειες

Έκδοση: CSS Filter Effects Module Level 1

υποστήριξη του προγράμματος περιήγησης

Τα αριθμήματα στη στήλη αναφέρονται στην έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη συναρτηση.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

σχετικές σελίδες

Αναφορά:CSS filter attribute

Αναφορά:CSS blur() συναρτηση

Αναφορά:CSS brightness() συναρτηση

Αναφορά:CSS contrast() συναρτηση

Αναφορά:CSS grayscale() συναρτηση

Αναφορά:CSS hue-rotate() συναρτηση

Αναφορά:CSS invert() συναρτηση

Αναφορά:CSS opacity() συναρτηση

Αναφορά:CSS saturate() συνάρτηση

Αναφορά:CSS sepia() συνάρτηση