Функция CSS drop-shadow()
- Предыдущая страница Функция cubic-bezier() в CSS
- Следующая страница Функция ellipse() в CSS
- Вернуться на один уровень вверх Референсное руководство по функциям CSS
Определение и использование
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
- Предыдущая страница Функция cubic-bezier() в CSS
- Следующая страница Функция ellipse() в CSS
- Вернуться на один уровень вверх Референсное руководство по функциям CSS