我有一个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;
．.． 显示此图像的阴影，就像它是一个正方形一样。所以，我看到我的图像和正方形阴影，它不遵循物体的形式，显示在图像中。
有什么正确的方法吗?
当前回答
这在css中是不可能的——图像是一个正方形，因此阴影将是正方形的阴影。最简单的方法是使用photoshop/gimp或任何其他图像编辑器来应用阴影，如核心绘制。
其他回答
正如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')";
}
这在css中是不可能的——图像是一个正方形，因此阴影将是正方形的阴影。最简单的方法是使用photoshop/gimp或任何其他图像编辑器来应用阴影，如核心绘制。
有点晚了，但是是的，使用投影过滤器(用于Webkit)， SVG(用于Firefox)和DX过滤器(用于IE)的组合，围绕alpha蒙面png创建“真正的”动态投影是完全可能的。
.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
filter: url(#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')";
}
<!-- HTML elements here -->
<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>
一些真正的水滴阴影和盒阴影之间的比较，以及一篇关于我刚才描述的技术的文章。
只要加上这个:
-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);
}
是的，可以使用滤镜:dropShadow(x y blur?传播?颜色?)，无论是在CSS或内联:
img { 宽度:150 px; -webkit-filter: drop-shadow(5px 5px 5px #222); 滤镜:投影(5px 5px 5px #222); ｝ < img src = " https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png " > <img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222);滤镜:投影(5px 5px 5px #222);" >
