Ιδιότητα box-shadow

Η ιδιότητα box-shadow ορίζει μια σκιά σε ένα μπλοκ. Ως τιμή, η ιδιότητα δέχεται 6 παραμέτρους, που παρατίθενται χωρισμένες με κενό, ή τη λέξη-κλειδί none, που ακυρώνει εντελώς τη σκιά.

Σύνταξη

cssεπιλογέας {
  box-shadow: inset μετατόπιση_στο_x μετατόπιση_στο_y απώλεια εFocus μέγεθος_σκιάς χρώμα;
}

cssεπιλογέας {
  box-shadow: none;
}

Παράμετροι

Παράμετρος	Περιγραφή
`inset`	Προαιρετική παράμετρος. Εάν οριστεί, η σκιά θα είναι εντός του δοχείου, εάν δεν οριστεί - θα είναι εκτός.
μετατόπιση στο x	Ορίζει τη μετατόπιση της σκιάς κατά τον άξονα X. Η θετική τιμή μετατοπίζει προς τα δεξιά, η αρνητική - προς τα αριστερά.
μετατόπιση στο y	Ορίζει τη μετατόπιση της σκιάς κατά τον άξονα Y. Η θετική τιμή μετατοπίζει προς τα κάτω, η αρνητική - προς τα πάνω.
απώλεια εFocus	Ορίζει την απώλεια εFocus της σκιάς. Όσο μεγαλύτερη είναι η τιμή - τόσο πιο θολή θα είναι η σκιά. Προαιρετική παράμετρος. Εάν δεν οριστεί - η σκιά θα είναι καθαρή.
μέγεθος σκιάς	Ορίζει το μέγεθος της σκιάς. Η θετική τιμή τεντώνει τη σκιά, η αρνητική, αντίθετα, τη συμπιέζει. Προαιρετική παράμετρος. Εάν δεν οριστεί - η σκιά θα έχει το ίδιο μέγεθος με το στοιχείο.
χρώμα	Ορίζει το χρώμα της σκιάς σε οποιεσδήποτε μονάδες για χρώμα. Προαιρετική παράμετρος. Εάν δεν οριστεί - το χρώμα της σκιάς συμπίπτει με το χρώμα του κειμένου.

Οι μετατοπίσεις στους άξονες, η απώλεια εFocus και το μέγεθος της σκιάς ορίζονται σε οποιεσδήποτε μονάδες για μεγέθη, εκτός από ποσοστά.

Παράδειγμα

Σε αυτό το παράδειγμα, η σκιά μετατοπίζεται προς τα κάτω και δεξιά και προστίθεται μια μικρή απώλεια εFocus:

html<div id="elem"></div>

css#elem {
  box-shadow: 5px 5px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Παράδειγμα . Καθαρή σκιά

Σε αυτό το παράδειγμα, η σκιά μετατοπίζεται προς τα κάτω και δεξιά, αλλά δεν υπάρχει απώλεια εFocus (η σκιά θα είναι καθαρή):

html<div id="elem"></div>

css#elem {
  box-shadow: 2px 2px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Παράδειγμα . Ομοιόμορφη σκιά

Σε αυτό το παράδειγμα, η σκιά δεν μετατοπίζεται, αλλά σε αυτήν προστίθεται απώλεια εFocus:

html<div id="elem"></div>

css#elem {
  box-shadow: 0px 0px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Παράδειγμα . Μέγεθος σκιάς

Σε αυτό το παράδειγμα, η σκιά δεν μετατοπίζεται, η απώλεια εFocus ισούται με μηδέν, αλλά σε αυτήν προστίθεται μέγεθος (μαύρο - είναι το περίγραμμα, κόκκινο - είναι η σκιά):

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 0 3px red;
  border: 3px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Παράδειγμα . Απώλεια εFocus + μέγεθος σκιάς

Σε αυτό το παράδειγμα, η σκιά δεν μετατοπίζεται, αλλά σε αυτήν προστίθενται απώλεια εFocus και μέγεθος (μαύρο - είναι το περίγραμμα, κόκκινο - είναι η σκιά):

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 3px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Παράδειγμα . Εσωτερική σκιά

Σε αυτό το παράδειγμα, η σκιά βρίσκεται εντός του δοχείου:

html<div id="elem"></div>

css#elem {
  box-shadow: inset 0 0 6px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Δείτε επίσης

η ιδιότητα text-shadow,
που ορίζει σκιά στο κείμενο