Css box shadow: box-shadow | htmlbook.ru

Встроенный CSS

Хотите узнать больше об использовании CSS? Для начала попробуйте эти базовые примеры кода CSS, а затем примените их к своим собственным веб-страницам.

Читать далее

Юврадж - студент бакалавриата по информатике в Университете Дели, Индия.Он увлечен веб-разработкой Full Stack. Когда он не пишет, он исследует глубину различных технологий.

Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Еще один шаг…!

Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

CSS | Свойство box-shadow - GeeksforGeeks

CSS | Свойство box-shadow

Свойство box-shadow в CSS используется для придания теневому эффекту фреймам элемента.

Синтаксис:

 box-shadow: h-offset v-offset размытие распространение цвет | нет | вставка | начальная |
наследовать; 

Значение свойства:

• смещение по горизонтали: Требуется установить положение тени по горизонтали.Положительное значение используется для установки тени на правой стороне поля, а отрицательное значение используется для установки тени на левой стороне поля.
• v-offset: Требуется установить положение тени по вертикали. Положительное значение используется для установки тени ниже к блоку, а отрицательное значение используется для установки тени над блоком.
• blur: Это необязательный атрибут, работа этого атрибута заключается в размытии тени блока.

  Синтаксис:

   box-shadow: h-offset v-offset blur; 

  Пример:

  
  
  9666 Вывод:
  
  spread: Используется для установки размера тени.Размер спреда зависит от его значения.

  Синтаксис:

   box-shadow: h-offset v-offset размытие; 

  Пример:

  < html > < < title > Свойство CSS box-shadow title > < style > .gfg1 { граница: сплошная 1 пиксель; отступ: 10 пикселей; / * box-shadow: h-offset v-offset blur * / box-shadow: 5px 10px 10px; } .gfg2 { граница: сплошная 1 пиксель; отступ: 10 пикселей; / * box-shadow: h-offset v-offset blur * / box-shadow: 5px 10px 28px; } стиль > головка > < корпус корпус > < div class = "gfg1" > < h2 > Добро пожаловать в GeeksforGeeks! h2 > div > < br > < br > < div класс = "gfg2" > A c портал omputer Science div > body > html >

  9666 Вывод:
  
  цвет: Это необязательный атрибут, используемый для установки цвета тени.

  Синтаксис:

   box-shadow: h-смещение v-смещение цвет; 

  Пример:

  < html > < голова > 03 title > Свойство CSS box-shadow title > < style > .gfg1 { граница: сплошная 1 пиксель; отступ: 10 пикселей; / * box-shadow: h-offset v-offset blur spread * / box-shadow: 5px 10px 10px 10px; } .gfg2 { граница: сплошная 1 пиксель; отступ: 10 пикселей; / * box-shadow: h-offset v-offset blur spread * / box-shadow: 5px 10px 28px 20px; } стиль > головка > < корпус корпус > < div class = "gfg1" > < h2 > Добро пожаловать в GeeksforGeeks! h2 > div > < br > < br > < div класс = "gfg2" > A c портал omputer Science div > body > html >

  9666 Вывод:
  
  вставка: По умолчанию тень генерируется за пределами поля, но с помощью вставки мы можем создать тень внутри коробки.

  Синтаксис:

   box-shadow: h-смещение v-смещение цветовая вставка; 

  Пример:

  < html > < голова > 03 title > Свойство CSS box-shadow title > < style > .gfg1 { граница: сплошная 1 пиксель; отступ: 10 пикселей; / * box-shadow: h-offset v-offset blur цвет распространения * / box-shadow: 5px 10px 10px 10px green; } .gfg2 { граница: сплошная 1 пиксель; отступ: 10 пикселей; / * box-shadow: h-offset v-offset blur цвет распространения * / box-shadow: 5px 10px 28px 20px green; } стиль > головка > < корпус корпус > < div class = "gfg1" > < h2 > Добро пожаловать в GeeksforGeeks! h2 > div > < br > < br > < div класс = "gfg2" > A c портал omputer Science div > body > html >

  9666 Вывод:
  
  начальный: Он используется для установки свойства box-shadow в его значение по умолчанию.

  Синтаксис:

   box-shadow: initial; 

  Пример:

  < html > < голова > 03 title > Свойство CSS box-shadow title > < style > .gfg1 { граница: сплошная 1 пиксель; отступ: 10 пикселей; / * box-shadow: h-offset v-offset blur вставка цвета распространения * / box-shadow: 5px 10px 10px 10px зеленая вставка ; } .gfg2 { граница: сплошная 1 пиксель; отступ: 10 пикселей; / * box-shadow: h-offset v-offset blur вставка цвета распространения * / box-shadow: 5px 10px 28px 20px зеленая вставка ; } стиль > головка > < корпус корпус > < div class = "gfg1" > < h2 > Добро пожаловать в GeeksforGeeks! h2 > div > < br > < br > < div класс = "gfg2" > A c портал omputer Science div > body > html >

  9666 Вывод:
  
  наследование: Это свойство наследуется от своего родителя.
  нет: Это значение по умолчанию, оно не содержит никаких теневых свойств.

  Поддерживаемые браузеры: Браузеры, поддерживаемые свойством box-shadow , перечислены ниже:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

  CSS свойство box-shadow

  
  

  Пример

  Добавить тени к разным элементам

  :

  # example1 {
  box-shadow: 5px 10px;
  }

  # example2 {
  box-shadow: 5px 10px # 888888;
  }

  Попробуй сам "

  Дополнительные примеры "Попробуйте сами" ниже.

  ---

  Определение и использование

  Свойство box-shadow прикрепляет к элементу одну или несколько теней.

  ---

  Поддержка браузера

  Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

  Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

  < html > < голова > 03 title > Свойство CSS box-shadow title > < style > .gfg1 { граница: сплошная 1 пиксель; отступ: 10 пикселей; / * box-shadow: initial * / box-shadow: initial; } .gfg2 { граница: сплошная 1 пиксель; отступ: 10 пикселей; / * box-shadow: initial * / box-shadow: initial; } стиль > головка > < корпус корпус > < div class = "gfg1" > < h2 > Добро пожаловать в GeeksforGeeks! h2 > div > < br > < br > < div класс = "gfg2" > A c портал omputer Science div > body > html >

  Имущество
  тень	10.0 4.0 -webkit-	9,0	4,0 3,5 -моз-	5,1 3,1 -webkit-	10,5

  ---

  ---

  Синтаксис CSS

  тень коробки: нет | h-смещение v-смещение размытие, цвет распространения | вставка | начальный | наследование;

  Примечание: Чтобы прикрепить более одной тени к добавьте список теней, разделенных запятыми (см. пример "Попробуйте сами" ниже).
  

  Стоимость недвижимости

  Значение	Описание	Играй
  нет	Значение по умолчанию. Тень не отображается	Играй »
  смещение по горизонтали	Обязательно. Горизонтальное смещение тени. Положительное значение ставит тень на правой стороне поля, отрицательное значение помещает тень на левая часть коробки	Играй »
  v-образное смещение	Обязательно.Вертикальное смещение тени. Положительное значение ставит тень под рамкой, отрицательное значение помещает тень над рамкой	Играй »
  размытие	Необязательно. Радиус размытия. Чем выше число, тем более размытым тень будет	Играй »
  спред	Необязательно. Радиус распространения. Положительное значение увеличивает размер тень, отрицательное значение уменьшает размер тени	Играй »
  цвет	Необязательно.Цвет тени. Значение по умолчанию - цвет текста. Посмотрите на CSS Color Values ​​полный список возможных значений цвета. Примечание: В Safari (на ПК) параметр цвета является обязательным. Если не указать цвет, тень вообще не отображается.	Играй »
  вставка	Необязательно. Изменяет тень от внешней (исходной) тени на внутреннюю	Играй »
  начальный	Устанавливает для этого свойства значение по умолчанию.Читать о начальная	Играй »
  унаследовать	Наследует это свойство от своего родительского элемента. Читать о наследовать

  Совет: Подробнее о допустимых значениях (единицы длины CSS)

  ---

  Другие примеры

  Пример

  Добавить эффект размытия к тени:

  # example1 {
  box-shadow: 10px 10px 8px # 888888;
  }

  Попробуй сам "

  Пример

  Определите радиус распространения тени:

  # example1 {
  box-shadow: 10px 10px 8px 10px # 888888;
  }

  Попробуй сам "

  Пример

  Определить несколько теней:

  # example1 {
  box-shadow: 5px 5px синий, 10px 10px красный, 15px 15px зеленый;
  }

  Попробуй сам "

  Пример

  Добавьте ключевое слово вставки:

  # example1 {
  box-shadow: 5px 10px inset;
  }

  Попробуй сам "

  Пример

  Изображения, брошенные на стол.Этот пример демонстрирует, как создавать "поляроидные" изображения и вращать фото:

  div.polaroid {
  width: 284px;
  отступ: 10px 10px 20px 10px;
  граница: сплошная 1px #BFBFBF;
  цвет фона: белый;
  box-shadow: 10px 10px 5px #aaaaaa;
  }

  Попробуй сам "

  ---

  Связанные страницы

  Учебное пособие по CSS: Закругленные углы CSS

  Ссылка на HTML DOM: свойство boxShadow

  
  

  Модуль CSS фона и границ Уровень 3: тень блока Глава

  Модуль фона и границы CSS Уровень 3: тень блока Глава

  Аннотация

  Этот документ содержит определение «тени блока» свойство, которое было удалено из CSS3 Backgrounds и Границы модуля пока не стабилизируются.

  Статус этого документа

  Это обрывок черновика редактора, он полностью нестабилен, и не имеет никакого официального статуса. Относитесь к нему как к стикер на столе редакции.

  Свойство box-shadow

  Имя:	тень
  Значение:	нет | <тень> [, <тень> ] *
  Начальное:	нет
  Применимо к:	все элементы
  Унаследовано:	нет
  В процентах:	НЕТ
  СМИ:	визуальный
  Расчетное значение:	любая <длина> сделана абсолютной; вычисляется любой цвет; иначе как указано

  Свойство box-shadow прикрепляет одну или несколько падающих теней в коробку.Свойство представляет собой список теней, разделенных запятыми, каждая из которых указана. на 2-4 значения длины, необязательный цвет и необязательную вставку ключевое слово. Пропущенная длина равна 0, пропущенные цвета - это цвет, выбранный UA.

  Где

     <тень>   = вставка? && [ <длина>  {2,4} &&  <цвет> ? ] 

  Компоненты каждого <тень> интерпретируются следующим образом:

  • Первая длина - это горизонтальное смещение тени.А положительное значение рисует тень, которая смещена вправо от поле, отрицательная длина слева.
  • Вторая длина - это вертикальное смещение. Положительное значение смещает тень вниз, отрицательную - вверх.
  • Третья длина - радиус размытия. Отрицательные значения не разрешается. Если он равен 0, тень резкая, в противном случае, чем больше значение, тем больше размывается тень. Точный алгоритм не указано.
  • Четвертая длина - это радиус разворота.Положительные значения вызывают тень будет расти во всех направлениях на указанный радиус. Отрицательные значения приводят к уменьшению тени. Тень не должна изменить форму при применении радиуса разброса: острые углы должны остаются острыми.
  • Цвет - это цвет тени.
  • Ключевое слово inset, если присутствует, изменяет перетаскивание тень от внешней тени (та, которая затеняет коробку на холст, как если бы он был поднят над холстом) во внутреннюю тень (тот, который затеняет холст на коробку, как если бы коробка была вырезана из холста и сдвинулся за него).

  Внешняя тень блока отбрасывает тень, как если бы рамка-рамка элемента были непрозрачными. Тень рисуется только за пределами границы: это не отображается внутри рамки элемента.

  Внутренняя тень блока отбрасывает тень, как будто все, что находится за пределами заполнения края были непрозрачными. Внутренняя тень рисуется только внутри края отступа: он не выводится за пределы поля заполнения элемента.

  Если поле имеет ненулевой радиус границы, таким же образом закругляется тень.

  Это все еще обсуждается. Комментарии присылайте в www-style.

  Однако, если у блока есть изображение границы, тени рисуются по-другому: они маскируются изображением границы вместо области границы следующим образом.

  • Для внешней тени тень создается при условии, что padding box непрозрачен, а затем комбинируя его с изображением границы для создания маски альфа-канала для тени. Значения спреда интерпретируется как увеличение размера поля заполнения и вызывает маску изображения границы следует изменить соответствующим образом.Результирующая тень рисуется только за пределами поля. коробка.
  • Для внутренней тени тень создается при условии, что все за пределами рамки непрозрачен, а затем в сочетании с border-image, чтобы создать маску альфа-канала для тени. Спред значения интерпретируются как уменьшение размера рамки и вызывают маску изображения границы следует изменить соответствующим образом. Результирующая тень рисуется только внутри границ рамки.

  Если UA не может создать тени, соответствующие прозрачному и частично прозрачные аспекты изображения границы, он не должен создавать тень вообще. UA может игнорировать значения спреда при рисовании тени для изображения границы.

  Если элемент имеет несколько блоков, все они получают тени, но тени рисуются только там, где также должны быть нарисованы границы, см. 'box-break'.

  Эффекты тени применяются спереди назад: первая тень сверху, а остальные наслоены сзади.Тени не влияют макет и может перекрывать другие блоки или их тени. С точки зрения штабелирования контекстах и ​​порядке рисования рисуются внешние тени элемента непосредственно под фоном этого элемента, а внутренние тени элемент рисуется непосредственно над фоном этого элемента (ниже границ и изображения границы, если есть).

  Тени никогда не влияют на макет, не запускают прокрутку или увеличение размер прокручиваемой области.

  Ниже приведены несколько примеров оранжевого прямоугольника с синей рамкой. получает тень.

  граница: сплошной синий 5 пикселей; цвет фона: оранжевый; ширина: 144 пикселя; высота: 144 пикселя;	радиус границы: 20 пикселей;	border-radius: 0;
  тень коробки: rgba (0,0,0,0.4) 10px 10px;
  тень коробки: rgba (0,0,0,0.4) 10 пикселей 10 пикселей вставка
  тень коробки: rgba (0,0,0,0.4) 10 пикселей 10 пикселей 0 10px / * спред * /
  тень коробки: rgba (0,0,0,0.4) 10 пикселей 10 пикселей 0 10px / * распространение * / вставка

  Свойство 'box-shadow' применяется к псевдоэлементу '' :: first-letter '', но не псевдоэлемент '' :: first-line ''.Внешние тени не влияют на внутренние элементы таблицы в модели сворачивающейся границы. Если тень определена для одной границы край в сворачивающейся модели границы имеет несколько границ толщины (например, внешняя тень на столе, где одна строка имеет более толстые границы чем другие, или внутренняя тень на ячейке таблицы, охватывающей строки, которая примыкает к ячейки с разной толщиной границы), точное положение и рендеринг его тени не определены.

  Ссылки

  Нормативные ссылки

  Другие ссылки

  Указатель свойств

  Указатель

  Использование отрицательного разброса теней и прямоугольников для передачи глубины в CSS

  Ранее на этой неделе в 17-й серии подкаста CSS: Shadows, автор Адам Аргайл сделал наблюдение, что в «реальном мире», когда вы поднимаете объект с поверхности, тень, которая образуется под объектом, фактически сжимается.Затем он отметил, что мы можем лучше эмулировать это поведение, используя отрицательное распространение в наших свойствах CSS box-shadow . Честно говоря, я даже не знал, что вариант спреда может быть отрицательным . Таким образом, я подумал, что это будет забавный эффект, который можно попробовать на себе в каком-нибудь ванильном CSS.

  Запустите эту демонстрацию в моем проекте JavaScript Demos на GitHub.

  Посмотрите этот код в моем проекте JavaScript Demos на GitHub.

  Чтобы понять, передает ли негативное распространение box-shadow более естественное, органичное ощущение глубины, я помещаю две коробки рядом. Когда вы наводите указатель мыши на каждый прямоугольник, они «поднимаются» со страницы: тот, у которого нет box-shadow, разворотов; и один со спредом -5px box-shadow :

    
  
  
  
  <название>
  Использование Negative Box-Shadow Spread для передачи глубины в CSS
  
  
  
  
  
  Использование Negative Box-Shadow Spread для передачи глубины в CSS
  
  
  
  
  Не разбегайтесь
  
  
  -5px Разброс
  
  
  
  
  
  
  
    

  В обоих случаях эффект : hover увеличивает размытие и смещение тени; но только последний втягивает края box-shadow , включая отрицательный разброс.И, когда мы запускаем этот код в браузере, мы получаем следующий результат:

  Разница действительно небольшая. Но я думаю, что Адам прав: использование отрицательного распространения box-shadow кажется немного более естественным, более органичным. Конечно, в большинстве приложений я редко вижу, чтобы объекты так сильно выскакивали со страницы, поэтому будет интересно посмотреть, как это выглядит в меньшем масштабе. Но это определенно классная небольшая техника CSS, которая засела в моем мозгу.

  Понравилось это? Возможно, вам также понравится читать:

  Все, что вам нужно знать о CSS Box-Shadow

  Что такое свойство CSS box-shadow и почему я должен его использовать?

  Свойство тени блока - это полезный инструмент, который позволяет пользователю создавать несколько падающих теней вокруг элемента - для того, чтобы либо создать иллюзию того, что элемент возвышается над объектами позади него, либо чтобы элемент выглядел как хотя он был подавлен окружающим предметом.

  Как это работает?

  Свойство box-shadow требует как минимум двух значений: значение смещения по горизонтали и значение смещения по вертикали. Положительное значение, присвоенное свойству смещения по горизонтали, отбрасывает тень справа от элемента, а отрицательное значение отбрасывает тень слева. Точно так же положительное значение, присвоенное свойству вертикального смещения, отбрасывает тень вниз, а отрицательное значение отбрасывает тень вверх.

  Некоторые дополнительные свойства:

  • Размытие: значение, определяющее радиус размытия, применяемый к краю тени.Значение по умолчанию - 0, что означает, что край тени будет резким. Чем выше значение, тем более размытым будет край.
  • Spread: значение, которое контролирует радиус распространения, который, в свою очередь, определяет, насколько далеко будет простираться тень. Положительное значение увеличивает радиус разброса, отрицательное - уменьшает. Значение по умолчанию - 0.
  • Цвет: значение RGBA, определяющее цвет тени. Цвет по умолчанию - черный.
  • Вставка: если вы укажете ключевое слово "вставка", тень (тени) появится внутри элемента, а не снаружи по умолчанию.

  Обратите внимание, что вы можете назначить несколько теней одному элементу, просто разделив набор значений каждой тени запятой.

  Поддержка браузеров

  Браузеры поддерживают box-shadow в последнее время. IE9 и более поздние версии теперь могут правильно отображать свойство, в то время как Firefox версии 4.0 и более поздних версий больше не нуждается в префиксе -moz- . Аналогичным образом Chrome версии 10.0 и выше, а также Safari версии 5.1 и выше больше не нуждаются в префиксе -webkit- .По данным caniuse.com, 84,04% пользователей по всему миру поддерживают браузеры.

  Примеры

  Drop Shadow

  # shadow_1 {
  box-shadow: 8px 8px 5px 2px #AAAAAA;
  }

  Две тени

  # shadow_2 {
  box-shadow: 1px 1px 5px 5px #AAAAAA, -1px -1px 5px 5px #AAAAAA;
  }

  Sharp Shadow

  # shadow_3 {
  box-shadow: 5px 5px 0px 5px #AAAAAA;
  }

  Inset Shadow

  # shadow_4 {
  box-shadow: inset 8px 8px 5px 2px #AAAAAA, inset -8px -8px 5px 2px #AAAAAA;
  }

  Тень только с одной стороны

  # shadow_5 {
  box-shadow: 0px 11px 5px -3px #AAAAAA;
  }

  Над головой?
  Если вы ищете небольшое изменение или полное обновление, наша команда экспертов может помочь вернуть ваш веб-проект в нужное русло.
  Нажмите здесь, чтобы запросить бесплатное ценовое предложение.

  CSS3 Box Shadow Syntax Breakdown

  Этот пост представляет собой простой анализ свойства box-shadow CSS3, которое вы также можете просмотреть на моей диаграмме кликов.

  В основном это написано для начинающих CSS3, но содержит некоторую дополнительную информацию, которая может быть полезна разработчикам, уже знакомым с новыми возможностями CSS3, включая использование теней.

  Полный синтаксис

  Вот как выглядит объявление box-shadow со всеми возможными значениями и префиксами поставщиков:

  .коробка {
    -webkit-box-shadow: # c4c4c4 3px 3px 10px 5px вставка;
    -moz-box-shadow: # c4c4c4 3px 3px 10px 5px вставка;
    box-shadow: # c4c4c4 3px 3px 10px 5px inset;
  }
   

  Вы можете увидеть приведенный выше код в действии здесь.

  Так что же означают эти значения?

  Значение 1: Цвет

  Первое значение - это цвет тени. Это любое допустимое значение цвета. Цвет тени не является естественным полупрозрачным, что является общей чертой графических теней.Но вместо этого автор должен определить цвет вместе с необязательным значением прозрачности, чтобы тень имела прозрачность. Например, вы можете использовать значения цвета HSLA или RGBA, оба из которых допускают настройку альфа-канала. Или вы можете просто использовать полностью непрозрачный светло-серый цвет, как я использую.

  Согласно спецификации, значение цвета можно опустить, и вы можете определить цвет тени с помощью свойства color . Но по какой-то причине в WebKit это не работает. Другие браузеры справляются с этим нормально, что вы можете проверить с помощью этой демонстрации.

  Значение цвета может быть помещено после значений длины или перед ними, но не между любыми парами длин. Значит, вы не можете этого сделать:

  .коробка {
    box-shadow: 3px 3px # c4c4c4 10px 5px;
  }
   

  Браузер проигнорирует всю эту строку. Таким образом, значение цвета должно быть в начале или в конце (при условии, что у вас нет внутренней тени, как описано ниже).

  Значение 2: горизонтальное смещение

  Следующее значение может быть положительным или отрицательным и может быть любым допустимым значением длины CSS.Это значение указывает смещение по горизонтали. Положительное значение смещает тень вправо, а отрицательное - влево. Это смещение относится к положению прямоугольника, на который накладывается тень.

  Чтобы показать эффект, вот та же тень сверху, но со смещением по горизонтали 100 пикселей.

  Значение 3: Вертикальное смещение

  Третье значение - это вертикальное смещение и имеет те же характеристики, что и горизонтальное смещение, за исключением того, что тень будет смещена вверх или вниз (т.е.е. по вертикали), в зависимости от того, положительное или отрицательное значение.

  Опять же, вот та же тень с добавленным вертикальным смещением 100 пикселей.

  Значение 4: Радиус размытия (необязательно)

  Четвертое значение снова использует любое допустимое значение длины, за исключением того, что на этот раз отрицательное значение не имеет никакого эффекта и будет интерпретировано как «0». Радиус размытия определяет резкость или размытость тени. Чем ниже значение, тем резче тень. Высокое значение создаст большое размытие.

  Вот пример с очень большим радиусом размытия. И этот пример показывает, что происходит, когда значение отрицательное.

  Третье значение длины всегда будет интерпретироваться как как значение размытия.

  Значение 5: Расстояние распространения (необязательно)

  Следующее значение, другое значение длины, может быть положительным или отрицательным и будет определять, насколько тень будет расширяться за пределы любых уже определенных значений смещения. Отрицательное значение приведет к уменьшению или сжатию тени.

  В этом примере показано, как может выглядеть большое расстояние распространения, чтобы свести на нет любые значения смещения. И этот пример показывает эффект большого расстояния распространения с внутренней тенью (подробнее об этом ниже).

  Хотя значение размытия является необязательным, вы не можете исключить значение размытия, если включаете распространение, в противном случае значение размытия будет просто считаться значением размытия. Чтобы исправить это, вы просто используете значение «0» для размытия, а затем включаете значение спреда. Таким образом, значение спреда никогда не будет считано, если не включены три других значения длины.

  Значение 6: вставка (необязательно)

  Это значение работает аналогично логическому атрибуту HTML. Другими словами, его существование означает «использовать внутреннюю тень», а его исключение интерпретируется как внешняя тень. Таким образом, вам не нужно использовать «начало», вы просто опускаете его, когда не хотите вставлять тень.

  Вставка Значение должно быть первым или последним в объявлении, иначе вся строка будет инвертирована.

  Множественные тени

  Вы можете применить более одной тени к одному элементу, просто разделяя тени запятой, в одном объявлении box-shadow , например:

  .коробка {
    box-shadow: # c4c4c4 10px 10px 10px 5px, # c4c4c4 30px 20px 10px 10px;
  }
   

  Вот несколько странных, расположенных в шахматном порядке теней.

  Тени накладываются спереди назад, поэтому первая тень будет перекрывать вторую, вторая - третью и так далее. Это противоположно тому, как элементы HTML укладываются с помощью z-index.

  Несколько заключительных замечаний по теням коробок

  Вот несколько замечаний по реализации теней:

  • Браузер поддерживает очень хорошо, единственными большими проблемами являются IE6-8
  • Вы можете выполнить полифил с помощью CSS3 PIE, этого скрипта или cssSandpaper, но вам, вероятно, лучше просто отказаться от тени
  • Браузеры, требующие префиксов поставщика: Safari 3.От 1 до 5,0; Firefox 3.5 и 3.6; Chrome до версии 9; некоторые мобильные браузеры
  • Большая тень не оттолкнет другие элементы и не вызовет полос прокрутки, если она переполняет родительский
  • Тень блока будет закруглена, чтобы отразить любую настройку радиуса границы, но изображение границы на нее не повлияет.
  • Как указано здесь, тени блока могут вызвать проблемы с производительностью, поэтому используйте их с осторожностью.