css - 在 CSS 中为 PNG 图像投影

Question

我有一个 PNG 图像，它具有自由形式(非正方形)。

我需要对这张图片应用阴影效果。

标准方法...

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

... 显示此图像的阴影，就像它是一个正方形一样。所以，我看到我的图像和方形阴影，它不遵循图像中显示的对象的形式。

有什么办法可以正确地做到这一点吗？

Answer 1

是的，可以使用 filter: dropShadow(x y blur? spread? color?) ，在 CSS 或内联中:

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">