CSS drop-shadow() 函数

定义和用法

CSS 的 drop-shadow() 滤镜函数为图像应用投影效果。

实例

例子 1

为图像添加不同的投影效果：

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

亲自试一试

例子 2

为图像添加不同的投影效果（使用负值的水平和垂直阴影）：

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

亲自试一试

CSS 语法

drop-shadow(h-shadow v-shadow blur spread color)
值 描述
h-shadow

必需。指定水平阴影的像素值。

负值将阴影放置在图像的左侧。
v-shadow

必需。指定垂直阴影的像素值。

నెగటివ్ విలువలు ముక్కులను చిత్రంపై పైకి చేరుస్తాయి.
blur

ఆప్షనల్. ముక్కులకు బ్లర్ ప్రభావాన్ని జోడించండి, యూనిట్లు పిక్సెల్స్.

విలువలు పెరిగేందుకు ముక్కులు పెరుగుతాయి మరియు తెలుపుగా మారుతాయి (ముక్కులు పెరుగుతాయి మరియు తెలుపుగా మారుతాయి).

నెగటివ్ విలువలను ఉపయోగించకుండా ఉండండి.

సూచించకపోయినట్లయితే, అప్రమేయంగా 0 (ముక్కుల మూలలు స్పష్టంగా ఉంటాయి).
spread

ఆప్షనల్. పిక్సెల్ విలువలు ఉండాలి.

పోజిటివ్ విలువలు ముక్కులను విస్తరించి పెంచగలవు, నెగటివ్ విలువలు ముక్కులను చిన్నగా చేస్తాయి.

సూచించకపోయినట్లయితే, అప్రమేయంగా 0 (ముక్కులు ఎలంట్ సైజ్ తో సమానంగా ఉంటాయి).
color

ఆప్షనల్. ముక్కులకు రంగును జోడించండి.

సూచించకపోయినట్లయితే, రంగు బ్రౌజర్ ప్రకారం (సాధారణంగా నలుపు) ఆధారపడినది.

సాంకేతిక వివరాలు

వెర్షన్: CSS Filter Effects Module Level 1

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ ఫంక్షన్ పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను సూచిస్తాయి。

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
18 12 35 6 15

సంబంధిత పేజీలు

参考：CSS ఫిల్టర్ అట్రిబ్యూట్

参考：CSS blur() ఫంక్షన్

参考：CSS brightness() ఫంక్షన్

参考：CSS contrast() ఫంక్షన్

参考：CSS grayscale() ఫంక్షన్

参考：CSS hue-rotate() ఫంక్షన్

参考：CSS invert() ఫంక్షన్

参考：CSS opacity() ఫంక్షన్

参考：CSS saturate() 函数

参考：CSS సెపియా () ఫంక్షన్