如何在透明度的png圖像周圍添加陰影？

Question

我想爲透明度爲的png添加陰影。

這意味着自動這意味着箱陰影出 - 陰影是矩形/圍繞圖像的邊界框。

也試過下拉陰影：

-webkit-filter: drop-shadow(0px 0px 250px rgba(255, 255, 255, 0.4)); 
filter: drop-shadow(0px 0px 250px rgba(255, 255, 255, 0.4)); 

它看起來不錯，但性能，特別是在瀏覽器，速度很慢。

我知道的唯一選擇是在圖像本身內添加陰影，但是陰影具有很大的擴展（因此圖像尺寸很大）並且壓縮會看起來很糟糕。

還有其他選擇/建議嗎？

Answer 1

由於filter屬性此刻被認爲是實驗性的，所以我不會指望它非常快。我甚至不希望它能夠在每個瀏覽器上都能正常工作（我正在與你交談，Internet Explorer！）。所以我建議現在就避免使用這些功能。

那麼，你可以做什麼？在我看來，有兩種選擇，取決於你的圖像是怎樣的。

1）您可以將其設置爲SVG圖像並添加陰影。欲瞭解更多信息，請閱讀this question。

2）或者，如果png文件對SVG來說過於複雜，則可以使用Photoshop或paint.NET等工具在圖像本身中添加陰影。