你能用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

时代如何变化。现在可以in some browsers，如当前接受的答案所示。

---

<击> 使用CSS无法做到这一点：

这就是我认为你要求的。

Answer 4

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

我的例子使用了这张图片：

因为它有一个透明的背景而且它不是正方形（对于CSS的box-shadow来说就是行动）。这不是很花哨，但是这个小而简单的教程很好。

我采取的下一步是创建另一个图像，基于上面的图像，将其放在原始图像下。

步骤1。添加模糊：

第二步。消除了光线和对比度：

所以我有原始和阴影。

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

风格：

.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关于canvas的建议为此编写了一个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;