САЙТЫ  ПОД  КЛЮЧ
ОНЛАЙН-СЕРВИСЫ СПРАВОЧНИКИ SEO-ИНСТРУМЕНТЫ РАЗВЛЕЧЕНИЯ

Справочник по CSS

-webkit-box-shadow

Internet Explorer Chrome Opera Safari Firefox Android iOS
1.0+ 3.1+

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Процентная запись Неприменима

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius (или -webkit-border-radius) то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Синтаксис

-webkit-box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Значения

none
Отменяет добавление тени.
inset
Тень выводится внутри элемента. Необязательный параметр.
сдвиг по x
Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y
Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие
Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение
Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет
Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-box-shadow</title>
  <style>
   .shadow {
    -webkit-box-shadow: 5px 5px 10px #000;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="shadow">Ля-минорной диатонической пентатоники не бывает, 
   а бывает ля-минорная блюзовая гамма. 
   Она отличается от ля-минорной пентатоники одной нотой.</div>
 </body>
</html>

Результат примера показан на рис. 1.

Вид тени в браузере Safari

Рис. 1. Вид тени в браузере Safari

Справочник по CSS. Версия 7.0 от 5.11.12

© 2002–2012 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

htmlbook.ru


Это интересно

Своей популярностью Google обязан функции «Возможно, Вы имели в виду…». Она не только проверяет орфографию, но и автоматически укажет на ошибку.


Наши реквизиты
WMID: 309688839848
WMR: R325885159214
E-mail: 
  BL:Бизнес-уровень [BL]
QR-код сайта
Онлайн-радио
Больше радиостанций