您可以使用 CSS 为 PNG 内容添加非方形阴影吗？

Question

是否可以对 PNG 内容添加阴影？

不是一个正方形，而是一个物体阴影
作用于 PNG 的非透明内容。

Answer 1

这绝对是可能的。

使用过滤器示例：

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

Answer 2

在 CSS 中不可能做到这一点。但是，很可能通过画布来完成此操作，但效率会有些低（因为每次都由客户端处理）并且依赖于 JavaScript。在 PNG 中执行此操作会更容易，并且适用于更多浏览器。

如果您想了解更多信息，请在网上搜索“html canvas Blur”和“html canvas load image”等内容。或者更好的是，使用可以完成这一切的画布阴影功能。

这是一个示例： http://philip.html5.org/demos/canvas/shadows /various.html

• 从画布集 context.shadow(Color|OffsetX|OffsetY|Blur) 创建上下文
• 根据需要
• 使用 context.drawImage 从 img 标签加载 PNG
• 啊！阴影！

还有一个好处：

• 如果您想导出为 PNG，请使用 context.toDataURL（制作一个网络应用程序，您将 PNG 文件放入其中，它就会为您提供阴影！）

Answer 3

时代如何变迁。现在可以在某些浏览器中，如当前接受的答案所示。

---

<罢工>
使用CSS不可能做到这一点：

这就是我认为你所要求的。

Answer 4

在 CSS 可用之前，您可以尝试我的方法。

我的示例使用这张图片：

因为它具有透明背景并且不是正方形（对于 CSS 的 box-shadow开始行动）。它不是很花哨，但是可以很好地满足这个小而简单的教程。

我采取的下一步是根据上面的图像创建另一张图像，将其放置在原始图像下方。

步骤1.添加模糊：

步骤2。删除了光线和对比度：

所以我有了原始图像和阴影。

接下来，我将把它显示为阴影：

样式：

.common {width: 100px;height: 100px;background-size: 100% 100%; position:absolute;}

.divOriginal {background-image: url(../img/original.png);top:2em;left:2em;z-index:10;}

.divShadow {background-image: url(../img/shadow.png);top: 3em;left: 2.5em;z-index:8;}

发挥魔法：

添加一个 div 并设置 attribute class="divOriginal common" 和另一个 class="divShadow common"。

结果应该是：

干杯！

阿迪

Answer 5

我根据 Chris Morgan 关于画布的建议为此编写了一个 jQuery 插件。您可以在 GitHub 上找到它：https://github.com/Kukunin/image-shadow

Answer 6

使用createjs
样本可以在以下位置找到：
JSFiddle

shadowTarget.shadow = shadow;

stage.addChild(shadowTarget);

shadowTarget.x = 500 / 2;
shadowTarget.y = 450 / 2;

shadowTarget.regX = shadowTarget.image.width/2;
shadowTarget.regY = shadowTarget.image.height/2;