我有一个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));

其他回答

有一个提议的功能,你可以使用任意形状的投影。你可以在这里看到,由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; }

是的,可以使用滤镜: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);" >

只要加上这个:

-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); 
}

正如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')";
}