Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство box-shadow

Дата:26.09.15 в 16:13
Справочник: 

Характеристики свойства

В каких браузерах работает?

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>

По итогу получаем

box-shadow

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: