CSS σκιές-πλαισίου ιδιότητα

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

Η ιδιότητα boxShadow προσθέτει μια ή περισσότερες σκιάς στο πλαίσιο.

Σημείωση:Χρησιμοποιήστε τις ιδιότητες border-image-* για να δημιουργήσετε όμορφους κουμπιά που επεκτείνουνται.

Δείτε επίσης:

Εκμάθηση CSS3:CSS3 περιθώρια

Εγχειρίδιο HTML DOM:Ιδιότητα boxShadow

Παράδειγμα

Προσθέστε box-shadow στο στοιχείο div:

div
{
box-shadow: 10px 10px 5px #888888;
}

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

Περισσότερες παραδείξεις στο κάτω μέρος της σελίδας.

Γλώσσα γραφής CSS

box-shadow: h-shadow v-shadow blur spread color inset;

Σημείωση:Η ιδιότητα box-shadow προσθέτει μια ή περισσότερες σκιάς στο πλαίσιο. Η ιδιότητα αυτή είναι μια λίστα σκιάς που διαχωρίζεται με κόμματα, κάθε σκιά περιλαμβάνει 2-4 τιμές μήκους, προαιρετική τιμή χρώματος και προαιρετική λέξη clave inset. Οι τιμές που παραλείπονται είναι 0.

Τιμή του χαρακτηριστικού

Τιμή Περιγραφή Δοκιμή
h-shadow Απαιτείται. Επίπεδο της σκιάς. Επιτρέπεται η χρήση αρνητικών τιμών. Δοκιμή
v-shadow Απαιτείται. Υψόμετρο της σκιάς. Επιτρέπεται η χρήση αρνητικών τιμών. Δοκιμή
blur Προαιρετικό. Απόσταση rozmiecia. Δοκιμή
spread Προαιρετικό. Μέγεθος της σκιάς. Δοκιμή
color Προαιρετικό. Χρώμα της σκιάς. Δείτε τις τιμές χρώματος CSS. Δοκιμή
inset Προαιρετικό. Μεταφέρετε την εξωτερική σκιά (outset) σε εσωτερική σκιά. Δοκιμή

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

Προεπιλεγμένη τιμή: none
Εκδοχικότητα: no
Έκδοση: CSS3
Γλώσσα γραφής JavaScript: object.style.boxShadow="10px 10px 5px #888888"

Περισσότερες παραδείξεις

Εικόνα που πετάγεται πάνω στο τραπέζι
Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε εικόνες Polaroid και να γυρίσετε τις εικόνες.

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

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

Αριθμοί με -webkit- ή -moz- δείχνουν την πρώτη έκδοση που χρησιμοποιεί το πρόθεμα.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5