我有一个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;
．.． 显示此图像的阴影，就像它是一个正方形一样。所以，我看到我的图像和正方形阴影，它不遵循物体的形式，显示在图像中。
有什么正确的方法吗?
当前回答
只要加上这个:
-webkit-filter: drop-shadow(5px 5px 5px #fff);
filter: drop-shadow(5px 5px 5px #fff);
例子:
<img class="home-tab-item-img" src="img/search.png">
.home-tab-item-img{
-webkit-filter: drop-shadow(5px 5px 5px #fff);
filter: drop-shadow(5px 5px 5px #fff);
}
其他回答
如果你有>100张图片，你想要有阴影，我建议使用命令行程序ImageMagick。有了这个，你可以应用形状投影到100个图像，只需输入一个命令!例如:
for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done
上面的(shell)命令获取当前目录中的每个.png文件，应用投影，并将结果保存在shadow/目录中。如果你不喜欢生成的阴影，你可以调整参数很多;从查看阴影的文档开始，一般使用说明中有很多可以对图像进行处理的很酷的例子。
如果你在未来改变了你对阴影的外观的想法-这只是一个命令，生成新的图像与不同的参数:-)
也许你正在寻找这个。 http://lineandpixel.com/blog/png-shadow
img { png-shadow: 5px 5px 5px #222; }
正如Dudley在他的回答中提到的，这可以通过webkit的dropshadow CSS过滤器，Firefox的SVG和Internet Explorer 9-的DirectX过滤器实现。
进一步的一步是内联SVG，消除额外的请求:
.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
当我张贴这原来是不可能的，所以这是解决办法。现在我建议使用其他答案。
没有办法准确地得到图像的轮廓，但你可以在图像后面的中心处设置一个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不透明，让它看起来像透明的，这并不难，你可以评论，我稍后会解释)
这在css中是不可能的——图像是一个正方形，因此阴影将是正方形的阴影。最简单的方法是使用photoshop/gimp或任何其他图像编辑器来应用阴影，如核心绘制。
