Характеристики свойства
В каких браузерах работает?
| 9.0+ | 10.0+ | 10.5+ | 5.1+ | 4.0+ | 4.0+ | 5.0+ |
В каких версиях CSS используется?
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| - | - | - | + |
Для чего используется?
По работе и свойствам близок к border. Отличие заключается в том, что в качестве рамки объекта выступает тень. Это свойство создает эффект трехмерного элемента, приносит таблице или блоку объем. Скругление влияет на тень, как и на рамку - она скругляется. Тень занимает дополнительное пространство на страничке, поэтому при использовании этого свойства следует оставлять дополнительное место для нее.
Как правильно задавать?
box-shadow: параметры тени;
Какие могут быть значения?
- none - выключает эффект тени.
- inset - создает тень внутри объекта, что создает эффект вдавленности.
- сдвиг по x (описывается числом) - управляет углом падения тени, а точнее смещение ее относительно горизонтальной оси.
- сдвиг по y (описывается числом) - управляет углом падения тени, а точнее смещение ее относительно вертикальной оси.
- размытие - можно сгладить эффект тени, то есть осветлить ее и снизить контраст при переходе от заднего фона к тени.
- растяжение - растягивает тень в длину и ширину (в зависимости от того, как указан сдвиг). При указании отрицательного значения этого параметра тень сужается и уменьшается.
- цвет - задает окрас тени в соответствии с кодировкой цветов.
Допустимо задавать параметры тени для каждой стороны отдельно, разделяя значения запятой. Первое значение будет соответствовать верхней стороне, а дальше по порядку по часовой стрелке.
Пример использования
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свойство box-shadow</title> <style> div{ background: #b04d4d; box-shadow: 0 0 20px #000; padding: 20px; color:#eee; text-align:center; } </style> </head> <body> <div>Собака - самый верный и преданный друг человека!</div> </body> </html>
По итогу получаем
Тип CSS свойства:
Градиент