Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

box-shadow

Свойство CSS box-shadow используется для добавления теней к HTML-элементам. Если элемент имеет скругленные углы (свойство border-radius), то тень тоже скругляется. При этом надо четко понимать, что наличие или отсутствие тени никак не влияет на размер самого элемента, так как она «падает» на его поля и пространства за пределами элемента (в случае наружной тени).

Тип свойства

Назначение: контент.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства box-shadow является ключевое слово none либо указание через пробелы параметров тени: ее тип (внутренняя, наружная), цвет и от двух до четырех параметров в единицах измерения принятых в CSS отвечающих за смещение, размытие и размах тени.

  • none — отсутствие тени у элемента.
  • Параметры тени:
    1. Горизонтальное смещение — первый (обязательный) числовой параметр, который отвечает за смещение тени по горизонтали. Положительная величина смещает тень вправо, а отрицательная — влево.
    2. Вертикальное смещение — второй (обязательный) числовой параметр, который отвечает за смещение тени по вертикали. Положительная величина смещает тень вниз, а отрицательная — вверх.
    3. Размытие — третий (необязательный) числовой параметр, отвечающий за радиус размытия тени, вроде фильтра Гаусса. Если не указан, то размытие равно нулю. Отрицательные значения недопустимы.
    4. Размах — четвертый (необязательный) числовой параметр, который отвечает за радиус размаха (распространения) тени. Положительная величина увеличивает размер тени во всех направлениях, а отрицательная — уменьшает.
    5. inset — необязательное ключевое слово, означающее создание внутренней тени, если не указано, то тень наружная.
    6. Цвет — необязательный параметр. Указание цвета тени в любом доступном в CSS формате — имя цвета, шестнадцатеричное значение перед которым ставится знак решетки (#) либо десятичный формат RGB или RGBA (A — это прозрачность цвета, которая может меняться от 0 до 1, например 0.5). Если цвет тени не указан, то он совпадает с цветом текста элемента (свойство color).

Также в одном свойстве box-shadow можно сразу указать параметры для наружной и внутренней тени, поставив между ними запятую.

Процентная запись: не существует.

Значение по умолчанию: none.

Разные варианты наружной тени для одного элемента.

Разные варианты наружной тени для одного элемента

Синтаксис

box-shadow: none | параметры тени [, параметры тени]

Пример CSS: использование box-shadow

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство box-shadow</title>
  <style type="text/css">
   p {
    width: 100px; /* ширина параграфов */
    height: 100px; /* их высота */
    background: #ccff00; /* фоновый цвет */
    border: 2px #ff00cc solid; /* стили рамок */
    border-radius: 15px; /* радиус скругления углов */
   }
  .p1 {
    box-shadow: inset 20px 20px 5px #003300; /* внутренняя тень */
   }
   .p2 {
    box-shadow: inset 20px 20px 5px #003300,
                10px 10px #003300; /* внутренняя и наружная тень */
    }
  </style>
 </head>
 <body>
  <p class="p1"></p>
  <p class="p2"></p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS box-shadow в браузере Opera.

Использование свойства CSS box-shadow

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и вышеДо 10.010.0 и вышеДо 4.04.0 и вышеДо 10.510.5 и выше3.1 и выше
Поддержка:НетДаНетДаНетДаНетДаНет
CSS по алфавиту
CSS по назначению