我有一个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;
．.． 显示此图像的阴影，就像它是一个正方形一样。所以，我看到我的图像和正方形阴影，它不遵循物体的形式，显示在图像中。
有什么正确的方法吗?
当前回答
在我的例子中，它必须在现代移动浏览器上工作，使用不同形状和透明度的PNG图像。我使用图像的副本创建了投影。这意味着我有两个相同图像的img元素，一个在另一个上面(使用position: absolute)，后面的一个应用了以下规则:
.image-shadow {
filter: blur(10px) brightness(-100);
-webkit-filter: blur(10px) brightness(-100);
opacity: .5;
}
这包括亮度滤镜，以使底部图像变暗，以及模糊滤镜，以投射阴影通常具有的模糊效果。然后使用50%的不透明度来软化它。
这可以应用跨浏览器使用moz和ms标志。
例如:https://jsfiddle.net/5mLssm7o/
其他回答
在你的类中添加半径边界，如果它是一个块。因为默认情况下阴影将应用于块边界，即使你的图像有圆角。
border - radius: 4 px;
根据你的你的图像角改变它的边界半径。 希望这对你有所帮助。
只要加上这个:
-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; }
您不能在所有浏览器上可靠地执行此操作。微软不再支持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
