我有一个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;
．.． 显示此图像的阴影，就像它是一个正方形一样。所以，我看到我的图像和正方形阴影，它不遵循物体的形式，显示在图像中。
有什么正确的方法吗?
当前回答
正如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')";
}
其他回答
也许你正在寻找这个。 http://lineandpixel.com/blog/png-shadow
img { png-shadow: 5px 5px 5px #222; }
这是一个就绪辉光悬停动画代码片段:
http://codepen.io/widhi_allan/pen/ltaCq
-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
只要加上这个:
-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);
}
有一个提议的功能，你可以使用任意形状的投影。你可以在这里看到，由Lea Verou提供:
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
不过，浏览器支持很少。
在我的例子中，它必须在现代移动浏览器上工作，使用不同形状和透明度的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/
