Tematy: border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius | border-radius | box-shadow | border-image-source | border-image-width | border-image-outset | border-image-repeat | border-image-slice | border-image | box-decoration-break
| Dane w pigułce | |
| Zastosowanie | Tworzy cień pojemnika |
| Dziedziczenie | nie |
| Wartości | długość w px, pt, em, oraz kolor |
| Wartość domyślna | brak |
| Przykład | box-shadow: 10px 10px 5px #182019; |
| Składnia JavaScript | object.style.boxShadow="10px 10px 5px #182019" |
Aby zdefiniować cień, należy wpisać w definicji stylu box-shadow : h-shadow v-shadow blur color inset
Aby definicja była odczytywana przez Firefoksa 3.x, należy dodać także definicję z prefiksem -moz-, czyli -moz-box-shadow : wartość. Firefox 4 nie wymaga prefiksu.
Aby definicja była odczytywana przez Chrome, należy dodać także definicję z prefiksem -webkit-, czyli -webkit-box-shadow : wartość. Opera nie wymaga prefiksu.
Polecenie box-shadow służy do tworzenia cienia pojemnika. Pierwsza wartość (h-shadow) definiuje przesunięcie cienia w prawo, druga (v-shadow) - przesunięcie w dół, trzecia (blur) - stopień rozmycia. Definicja koloru określa kolor cienia. Ujemne wartości przesunięcia powodują przesunięcie odpowiednio w lewo i do góry
Przykłady:
<div style="width: 200px; height: 100px; background-color:olive; box-shadow: 5px 5px 20px #182019;">
</div>
<div style="width: 200px; height: 100px; background-color:olive; box-shadow: -5px -5px 15px #182019;">
</div>
Dodatkowy parametr inset wprowadza cieniowanie do wewnątrz.
<div style="width: 200px; height: 100px; background-color:olive; box-shadow: inset 5px 5px 20px #182019;">
</div>
<div style="width: 200px; height: 100px; background-color:olive; box-shadow: inset -5px -5px 15px #182019;">
</div>
Interpretacja: Internet Explorer 9, Firefox (z prefiksem), Opera, Chrome (z prefiksem).
