CSS :: Свойство box-shadow
css-свойство box-shadow (от англ. box shadow – тень блока) создает одну или несколько теней элемента. Если теней несколько, их значения должны перечисляться через запятую.
Характеристики
- Значение по умолчанию: none.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.boxShadow="value".
Синтаксис
box-shadow: none | <тень>[, <тень>]*, где
<тень> = inset <смещение x> <смещение y> <размытие> <растяжение> <цвет>
Значения
- смещение x – обязательный параметр, который в случае положительных значений смещает тень относительно элемента по горизонтали вправо, а в случае отрицательных значений – влево. Если значение параметра равно нулю, то смещение отсутствует.
- смещение y – обязательный параметр, который в случае положительных значений смещает тень относительно элемента вверх, а в случае отрицательных значений – вниз. Если значение параметра равно нулю, то смещение отсутствует.
- размытие – необязательный параметр, который устанавливает радиус размытия тени. Чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям. Если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром.
- растяжение – необязательный параметр, который в случае положительного значения растягивает тень, а в случае отрицательного значения сжимает тень. Если же значение не будет установлено, то браузер по умолчанию установит растяжение равное нулю и тень будет иметь те же размеры, что и элемент.
- цвет – определяет цвет тени. т.к. браузеры по умолчанию задают разный цвет тени, то желательно всегда задавать этот необязательный параметр.
- inset – тень будет выводиться внутри элемента, при этом она будет располагаться над фоном, но под любым содержимым элемента. Данный параметр не является обязательным и может применяться как в качестве первого параметра, так и последнего в списке.
- none – тень добавляться не будет (используется по умолчанию).
Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения (смотреть), а для указания цвета – любое допустимое в CSS его значение.
Если необходимо добавить сразу несколько теней, то они перечисляются через запятую. При этом первая тень в списке будет расположена на самом верху, а последняя — в самом низу.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/box-shadow
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 300px; height: 100px; margin: 7em; } .p_1{ border: solid 5px red; background-color: yellow; box-shadow: 10px 10px 50px 15px blue; } .p_2{ border: solid 5px orange; background-color: violet; box-shadow: 5px 5px 8px 10px blue inset, 10px 10px 8px 10px green, 15px 15px 8px 10px red } </style> </head> <body> <p class="p_1"> Одна тень. </p> <p class="p_2"> Несколько теней. </p> </body> </html>
Пример №1