⌘K

Функция drop-shadow

Функцията drop-shadow позволява да добавите сянка към фоново изображение.

Синтаксис

cssселектор {
  filter: drop-shadow(отместване по x, отместване по y, радиус на размазване, цвят);
}

Стойности

Стойност Описание
отместване по x Отместване на сянката хоризонтално спрямо фона. Положително число обозначава отместване на сянката надясно, отрицателно - наляво. Задължителен параметър.
отместване по y Отместване на сянката вертикално спрямо фона. Положително число обозначава отместване на сянката надолу, отрицателно - нагоре. Задължителен параметър.
размазване Задава радиуса на размазване на сянката. Колкото по-голяма е стойността, толкова повече сянката се размазва. Незадължителен параметър. По подразбиране е равно на 0.
цвят Цвят на сянката. Незадължителен параметър. По подразбиране се задава черен цвят на сянката.

Пример

Нека зададем за нашето изображение синя сянка без отместване по осите, с размазване 5px: 

html<div id="elem"></div>
css#elem {
  filter: drop-shadow(0 0 5px #035470);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Вижте също

  • функция blur,
    която размазва фона
  • функция brightness,
    която задава яркост на фона
  • функция contrast,
    която задава контрастност на фона
  • функция hue-rotate,
    която задава цветовата наситеност на фона
  • функция invert,
    която инвертира цветовете на фона
  • функция opacity,
    която задава прозрачност на фона
  • функция sepia,
    която преобразува фона в сепия
  • свойство background,
    което е свойство-съкращение за фона
  • свойство background-image,
    с което на блок може да се зададе фонова картинка
BackФункция contrastNextФункция hue-rotate