我有一个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;
．.． 显示此图像的阴影，就像它是一个正方形一样。所以，我看到我的图像和正方形阴影，它不遵循物体的形式，显示在图像中。
有什么正确的方法吗?
当前回答
这是一个就绪辉光悬停动画代码片段:
http://codepen.io/widhi_allan/pen/ltaCq
-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
其他回答
当我张贴这原来是不可能的，所以这是解决办法。现在我建议使用其他答案。
没有办法准确地得到图像的轮廓，但你可以在图像后面的中心处设置一个div。
如果我的方法不管用，那你就得把图像切碎，然后对每一个小图像都这样做。(图像越多，阴影看起来越准确) 但是对于大多数图像来说，只用一个img就可以了。
你需要做的是把一个包装div围绕你的img像这样
<div id="imgWrap">
<img id="img" scr="imgLocation">
</div>
然后你在包装里面放一个空的分隔线(这将作为阴影)
<div id="imgWrap">
<div id="shadow"> </div>
<img id="img" scr="imgLocation">
</div>
然后你必须用CSS使阴影出现在img的后面:
#img {
z-index: 1;
}
#shadow {
z-index: 0; /*make this value negative if doesnt work*/
box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
width: 0;
height: 0;
}
现在定位imgWrap来定位原来的img… 为了使img的阴影居中，你可以打乱前两个值 盒子阴影使它们为负.... 或者你可以把img和阴影divs放在绝对的位置 使img的顶部和左侧值= 0 阴影div值分别= img宽度和高度的一半。
如果这看起来很可怕，剪掉你的img，再试一次。
(如果你不想让img后面的阴影只在轮廓上那么你需要让你的img不透明，让它看起来像透明的，这并不难，你可以评论，我稍后会解释)
有一个提议的功能，你可以使用任意形状的投影。你可以在这里看到，由Lea Verou提供:
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
不过，浏览器支持很少。
也许你正在寻找这个。 http://lineandpixel.com/blog/png-shadow
img { png-shadow: 5px 5px 5px #222; }
img {
-webkit-filter: drop-shadow(5px 5px 5px #222222);
filter: drop-shadow(5px 5px 5px #222222);
}
这对我来说很有效。需要注意的一点是，在IE中，你需要全色(#222222)三个字符是不行的。
您不能在所有浏览器上可靠地执行此操作。微软不再支持DX过滤器作为IE10+，所以没有一个解决方案在这里完全工作:
https://msdn.microsoft.com/en-us/library/hh801215 (v = vs.85) . aspx
唯一能在所有浏览器中可靠工作的属性是box-shadow，它只是把边框放在你的元素上(例如div)，结果是一个方形边框:
box-shadow: horizontalOffset verticalOffset blurDistance spreadDistance color inset;
e.g.
box-shadow: -2px 6px 12px 6px #CCCED0;
如果你碰巧有一个“正方形”的图像，但有统一的圆角，投影使用border-radius，所以你可以一直在div中模拟你的图像的圆角。
下面是box-shadow的微软文档:
https://msdn.microsoft.com/en-us/library/gg589484 (v = vs.85) . aspx
