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հատկությունը,
որի օգնությամբ բլոկին կարելի է տալ ֆոնային նկար