Функция drop-shadow
Функцията drop-shadow позволява
да добавите сянка към фоново
изображение.
Синтаксис
селектор {
filter: drop-shadow(отместване по x, отместване по y, радиус на размазване, цвят);
}
Стойности
| Стойност | Описание |
|---|---|
| отместване по x | Отместване на сянката хоризонтално спрямо фона. Положително число обозначава отместване на сянката надясно, отрицателно - наляво. Задължителен параметър. |
| отместване по y | Отместване на сянката вертикално спрямо фона. Положително число обозначава отместване на сянката надолу, отрицателно - нагоре. Задължителен параметър. |
| размазване |
Задава радиуса на размазване на сянката.
Колкото по-голяма е стойността, толкова повече сянката се размазва.
Незадължителен параметър. По подразбиране
е равно на 0.
|
| цвят | Цвят на сянката. Незадължителен параметър. По подразбиране се задава черен цвят на сянката. |
Пример
Нека зададем за нашето изображение синя сянка
без отместване по осите, с размазване 5px:
<div id="elem"></div>
#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,
с което на блок може да се зададе фонова картинка