84 of 313 menu

Функция 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,
    с което на блок може да се зададе фонова картинка
Български
AfrikaansAzərbaycanবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Ние използваме бисквитки за работата на сайта, анализ и персонализация. Обработката на данни се извършва в съответствие с Политика за поверителност.
приемам всички настройки отхвърляне