前言
通常，我們?yōu)閐iv盒子或者圖片設(shè)置陰影使用box-shadow屬性暮现，代碼如下：
box-shadow: 10px 10px 10px gray;
問題拋出
使用box-shadow屬性 給div盒子設(shè)置陰影倒還好留美，如果用在透明的圖片上竿音，陰影會變成方形的冯键，讓其看起來像添加了一個邊框一樣。
解決方法
我們可以通過css的另一種參數(shù)妄辩，為透明png實(shí)現(xiàn)基于透明圖片的陰影效果惑灵，效果如下圖，左側(cè)是box-shadow眼耀，右側(cè)是drop-shadow英支。
01.png
drop-shadow()說明：
drop-shadow()是CSS中用于為圖像或文本添加陰影效果的一個函數(shù)，它屬于filter屬性的一部分哮伟。這個函數(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è)置模糊半徑的值荔泳。它是一個可選參數(shù)。 -
spread-radius：設(shè)置傳播半徑的值虐杯。它是一個可選參數(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的 情況达舒，也許你可以在你的下一個項(xiàng)目中使用它值朋！
