我有一个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://lineandpixel.com/blog/png-shadow

img { png-shadow: 5px 5px 5px #222; }

其他回答

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

这对我来说很有效。需要注意的一点是,在IE中,你需要全色(#222222)三个字符是不行的。

有点晚了,但是是的,使用投影过滤器(用于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); 
}

这在css中是不可能的——图像是一个正方形,因此阴影将是正方形的阴影。最简单的方法是使用photoshop/gimp或任何其他图像编辑器来应用阴影,如核心绘制。

有一个提议的功能,你可以使用任意形状的投影。你可以在这里看到,由Lea Verou提供:

http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom

不过,浏览器支持很少。