前言
通常，我們?yōu)閐iv盒子或者圖片設(shè)置陰影使用box-shadow屬性，代碼如下：
box-shadow: 10px 10px 10px gray;
問題拋出
使用box-shadow屬性 給div盒子設(shè)置陰影倒還好，如果用在透明的圖片上，陰影會(huì)變成方形的，讓其看起來像添加了一個(gè)邊框一樣。
解決方法
我們可以通過css的另一種參數(shù)，為透明png實(shí)現(xiàn)基于透明圖片的陰影效果，效果如下圖，左側(cè)是box-shadow，右側(cè)是drop-shadow。
01.png
drop-shadow()說明：
drop-shadow()是CSS中用于為圖像或文本添加陰影效果的一個(gè)函數(shù)，它屬于filter屬性的一部分。這個(gè)函數(shù)允許你為元素創(chuàng)建陰影，而不需要考慮元素的形狀或邊界框。與box-shadow不同，drop-shadow可以應(yīng)用于非矩形形狀，如透明的PNG或SVG圖像，它使用元素的Alpha蒙版來決定陰影的形狀。這意味著，即使元素沒有背景，drop-shadow也能為圖像的非透明部分創(chuàng)建陰影。
drop-shadow()語法如下：
filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )
drop-shadow()參數(shù)說明如下：
-
offset-x：該參數(shù)設(shè)置圖像的水平偏移量。正值創(chuàng)建右側(cè)偏移，負(fù)值創(chuàng)建左側(cè)偏移。 -
offset-y：此參數(shù)設(shè)置圖像的垂直偏移量。正值創(chuàng)建到底部的偏移量，負(fù)值創(chuàng)建到頂部的偏移量。 -
blur-radius：設(shè)置模糊半徑的值。它是一個(gè)可選參數(shù)。 -
spread-radius：設(shè)置傳播半徑的值。它是一個(gè)可選參數(shù)。 -
color：設(shè)置投影的顏色。它的可選參數(shù)。
演示代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img_box .left_img{
box-shadow: 10px 10px 10px gray;
}
.img_box .right_img{
filter: drop-shadow(2px 4px 8px rgb(225, 170, 170));
}
</style>
</head>
<body>
<div class="img_box">
<img class="left_img" src="./lihua.png" />
<img class="right_img" src="./lihua.png" />
</div>
</body>
</html>
總結(jié)
盡管有很好的支持，但 drop-shadow 濾鏡仍然沒有得到充分的利用。我希望這篇文章強(qiáng)調(diào)了一些使用 box-shadow的 情況，也許你可以在你的下一個(gè)項(xiàng)目中使用它！
