⌘K

Funkcija drop-shadow

Funkcija drop-shadow ļauj pievienot ēnu fona attēlam.

Sintakse

cssselektors {
  filter: drop-shadow(nobīde pa x, nobīde pa y, izplūdes rādiuss, krāsa);
}

Vērtības

Vērtība Apraksts
nobīde pa x Ēnas nobīde horizontāli attiecībā pret fona attēlu. Pozitīvs skaitlis nozīmē ēnas nobīdi pa labi, negatīvs - pa kreisi. Obligāts parametrs.
nobīde pa y Ēnas nobīde vertikāli attiecībā pret fona attēlu. Pozitīvs skaitlis nozīmē ēnas nobīdi uz leju, negatīvs - uz augšu. Obligāts parametrs.
izplūde Iestata ēnas izplūdes rādiusu. Jo lielāka vērtība, jo vairāk ēna tiek izplūdināta. Neobligāts parametrs. Pēc noklusējuma ir 0.
krāsa Ēnas krāsa. Neobligāts parametrs. Pēc noklusējuma tiek iestatīta melna ēnas krāsa.

Piemērs

Uzstādīsim mūsu attēlam gaiši zilu ēnu bez nobīdes pa asīm, ar izplūdi 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;
}

Результат:

Skatiet arī

  • funkcija blur,
    kas izplūdina fona attēlu
  • funkcija brightness,
    kas iestata fona attēla spilgtumu
  • funkcija contrast,
    kas iestata fona attēla kontrastu
  • funkcija hue-rotate,
    kas iestata fona attēla toņu
  • funkcija invert,
    kas invertē fona attēla krāsas
  • funkcija opacity,
    kas iestata fona attēla caurspīdīgumu
  • funkcija sepia,
    kas pārveido fona attēlu sepijā
  • īpašība background,
    kas ir saīsinājuma īpašība fonam
  • īpašība background-image,
    ar kuru blokam var piešķirt fona attēlu
BackFunkcija contrastNextFunkcija hue-rotate