通常，我們?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è)置的值，定義陰影的顏色。如果沒有設(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 過濾器則是創(chuàng)建一個(gè)符合圖像本身形狀 (alpha 通道) 的陰影。簡(jiǎn)單來說，drop-shadow生成的陰影是基于圖片內(nèi)部形狀，是不透明的部分，而不是在圖片外面，可以根據(jù)透明圖片的輪廓生成陰影。

drop-shadow(offset-x offset-y blur-radius spread-radius color)

• offset-x offset-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ù)期效果！