Функция CSS drop-shadow()

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

CSS drop-shadow() Функция фильтра применяет эффект проекции к изображениям.

Пример

Пример 1

Добавьте различные эффекты проекции к изображениям:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

Попробуйте сами

Пример 2

Добавьте различные эффекты проекции к изображениям (используйте отрицательные значения для水平和 вертикальной тени):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

Попробуйте сами

Синтаксис CSS

drop-shadow(h-shadow v-shadow blur spread color)
Значение Описание
h-shadow

Обязателен. Укажите пиксельное значение горизонтальной тени.

Отрицательное значение поместит тень слева от изображения.

v-shadow

Обязателен. Укажите пиксельное значение вертикальной тени.

Отрицательное значение поместит тень над изображением.

blur

Опционально. Добавьте эффект размытия для тени, единицы измерения - пиксели.

Чем больше значение, тем сильнее эффект размытия (тень становится больше и менее насыщенной).

Запрещено использовать отрицательные значения.

Если не указано значение, по умолчанию равно 0 (края тени четкие).

spread

Опционально. Значение должно быть в пиках.

Положительное значение расширит тень и увеличит ее, а отрицательное значение уменьшит.

Если не указано, по умолчанию равно 0 (тень такого же размера, как элемент).

color

Опционально. Добавьте цвет для тени.

Если не указано, цвет зависит от браузера (обычно черный).

Технические детали

Версия: Модуль эффектов фильтра CSS уровня 1

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

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Соответствующие страницы

См. также:Свойство filter в CSS

См. также:Функция CSS blur()

См. также:Функция CSS brightness()

См. также:Функция CSS contrast()

См. также:Функция CSS grayscale()

См. также:Функция CSS hue-rotate()

См. также:Функция CSS invert()

См. также:Функция CSS opacity()

См. также:Функция saturate() в CSS

См. также:Функция sepia() в CSS