Свойство box-shadow задает тень контейнеру.
См. также свойство text-shadow, которое задает тень тексту.
Синтаксис
селектор {
box-shadow: inset сдвиг_по_x сдвиг_по_y размытие размер_тени цвет | none;
}
Можно задать несколько теней, записывая их через запятую:
селектор {
box-shadow: 1px 1px 3px red, -1px -1px 3px blue;
}
Значения
Значения "сдвиг_по_x", "сдвиг_по_y", "размытие", "размер_тени" задаются в любых CSS единицах (кроме %), а цвет - в любых единицах для цвета (в том числе и rgba для полупрозрачной тени).
Значение none убирает тень.
Значение | Описание |
---|---|
inset | Необязательный параметр. Если он задан, то тень будет внутри контейнера, если не задан - то снаружи. |
Сдвиг_по_x | Обязательный параметр. Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное - влево. |
Сдвиг_по_y | Обязательный параметр. Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное - вверх (обратите внимание на это - не так, как в математике!). |
Размытие | Задает размытие тени. Чем больше значение - тем более размытой будет тень (см. примеры для лучшего понимания). Необязательный параметр. Если не задан - тень будет четкая. |
Размер_тени | Задает размер тени (см. примеры для лучшего понимания). Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Необязательный параметр. Если не задан - тень будет такого же размера, что и элемент. |
Цвет | Цвет тени в любом CSS формате. Необязательный параметр. Если не задан - тень будет черная. |
Значение по умолчанию: none.
Примеры
Пример
В данном примере тень сдвинута вниз и влево и добавлено небольшое размытие:
#elem {
box-shadow: 5px 5px 3px black;
border: 1px solid black;
width: 300px;
height: 50px;
}
Результат выполнения кода:
Пример . Четкая тень
В данном примере тень сдвинута вниз и влево, но размытия нет (тень будет четкой):
#elem {
box-shadow: 2px 2px black;
border: 1px solid black;
width: 300px;
height: 50px;
}
Результат выполнения кода:
Пример . Равномерная тень
В данном примере тень не сдвинута, но к ней добавлено размытие:
#elem {
box-shadow: 0px 0px 3px black;
border: 1px solid black;
width: 300px;
height: 50px;
}
Результат выполнения кода:
Пример . Размер тени
В данном примере тень не сдвинута, размытие равно нулю, но к ней добавлен размер (черное - это граница, красное - это тень):
#elem {
box-shadow: 0px 0px 0px 3px red;
border: 3px solid black;
width: 300px;
height: 50px;
}
Результат выполнения кода:
Пример . Размытие + размер тени
В данном примере тень не сдвинута, но к ней добавлены размытие и размер (черное - это граница, красное - это тень):
#elem {
box-shadow: 0px 0px 3px 3px black;
border: 1px solid black;
width: 300px;
height: 50px;
}
Результат выполнения кода:
Пример . Две тени сразу
В данном примере заданы сразу две тени:
#elem {
box-shadow: 3px 3px 3px red, -3px -3px 3px blue;
border: 1px solid black;
width: 300px;
height: 50px;
}
Результат выполнения кода:
Пример . Внутренняя тень
В данном примере тень находится внутри контейнера:
#elem {
box-shadow: inset 0px 0px 6px black;
border: 1px solid black;
width: 300px;
height: 50px;
}
Результат выполнения кода: