通常，我們?yōu)閳D片設(shè)置陰影使用box-shadow屬性芬膝，代碼如下：
box-shadow: h-shadow v-shadow blur spread color inset;
-
h-shadow：必需設(shè)置的值望门，定義水平陰影的位置。允許負(fù)值锰霜。 -
v-shadow：必需設(shè)置的值筹误，定義垂直陰影的位置。允許負(fù)值癣缅。 -
blur：可選設(shè)置的值厨剪，定義模糊距離。 -
spread：可選設(shè)置的值友存，定義陰影的尺寸祷膳。 -
color：可選設(shè)置的值，定義陰影的顏色屡立。如果沒(méi)有設(shè)置值直晨，顏色值基于瀏覽器顯示，建議設(shè)置膨俐。 -
inset：可選設(shè)置的值勇皇，設(shè)置后可將外部陰影 (outset) 改為內(nèi)部陰影。
示例：
為圖片添加陰影
<img src="image.jpg" alt="image">
img {
box-shadow: 10px 10px 10px gray;
}
image.png
但是對(duì)于透明圖片焚刺，使用該方法像是為圖片添加了邊框敛摘，不能根據(jù)圖片的實(shí)際輪廓添加陰影，效果如下：
image.png
對(duì)于透明圖片乳愉，我們可以用filter:drop-shadow
box-shadow 屬性在元素的整個(gè)框后面創(chuàng)建一個(gè)矩形陰影兄淫，而 drop-shadow 過(guò)濾器則是創(chuàng)建一個(gè)符合圖像本身形狀 (alpha 通道) 的陰影。簡(jiǎn)單來(lái)說(shuō)匾委，drop-shadow生成的陰影是基于圖片內(nèi)部形狀拖叙，是不透明的部分，而不是在圖片外面赂乐，可以根據(jù)透明圖片的輪廓生成陰影薯鳍。
drop-shadow(offset-x offset-y blur-radius spread-radius color)
-
offset-xoffset-y：必需設(shè)置的值，x偏移和y偏移 -
blur-radius：可選設(shè)置的值，陰影的模糊半徑挖滤，默認(rèn)為0 -
spread-radius：可選設(shè)置的值崩溪，陰影的擴(kuò)展半徑，但是大多數(shù)瀏覽器不支持這個(gè)參數(shù) -
color：可選設(shè)置的值斩松，色值
下面看使用drop-shadow的效果：
img {
filter: drop-shadow(2px 4px 8px gray);
}
image.png
達(dá)到預(yù)期效果伶唯！
