CSS property box-shadow
- poprzednia strona box-reflect
- Następna strona box-sizing
Definicja i użycie
Atrybut boxShadow dodaje jeden lub kilka cieni do ramki.
Wskazówka:Użyj atrybutów border-image-* do tworzenia pięknych przestrodukowych przycisków!
Zobacz również:
Tutorial CSS3:Krawędzie CSS3
Podręcznik HTML DOM:Atrybut boxShadow
Przykład
Dodaj box-shadow do elementu div:
div
{
box-shadow: 10px 10px 5px #888888;
}
Więcej przykładów znajduje się na dole strony.
Gramatyka CSS
box-shadow: h-shadow v-shadow blur spread color inset;
Komentarz:box-shadow dodaje jeden lub kilka cieni do ramki. Atrybut ten jest listą cieni oddzieloną przecinkami, gdzie każdy cień jest określony przez 2-4 wartości długości, opcjonalną wartość koloru oraz opcjonalne słowo kluczowe 'inset'. Omitnięte wartości długości są równe 0.
wartość atrybutu
| wartość | opis | Test |
|---|---|---|
| h-shadow | wymagane. Położenie cienia wzdłuż osi poziomej. Dopuszczalne są wartości ujemne. | Test |
| v-shadow | wymagane. Położenie cienia wzdłuż osi pionowej. Dopuszczalne są wartości ujemne. | Test |
| blur | opcjonalnie. Odległość rozmycia. | Test |
| spread | opcjonalnie. Rozmiar cienia. | Test |
| color | opcjonalnie. Kolor cienia. Zobacz wartości kolorów CSS. | Test |
| inset | opcjonalnie. Zmiana zewnętrznego cienia (outset) na wewnętrzny cień. | Test |
Szczegóły techniczne
| Domyślna wartość: | brak |
|---|---|
| Inheredność: | nie |
| Wersja: | CSS3 |
| Gramatyka JavaScript: | object.style.boxShadow="10px 10px 5px #888888" |
Więcej przykładów
- Obraz upuściony na stół
- Ten przykład pokazuje, jak tworzyć obrazy 'Polaroid' i obracać obrazy.
Wsparcie przeglądarki
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby z -webkit- lub -moz- jako prefiksem oznaczają pierwszą wersję używaną.
| 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 |
- poprzednia strona box-reflect
- Następna strona box-sizing
