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

... 显示此图像的阴影,就像它是一个正方形一样。所以,我看到我的图像和正方形阴影,它不遵循物体的形式,显示在图像中。

有什么正确的方法吗?


当前回答

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

一些真正的水滴阴影和盒阴影之间的比较,以及一篇关于我刚才描述的技术的文章。

其他回答

这是一个就绪辉光悬停动画代码片段:

http://codepen.io/widhi_allan/pen/ltaCq

-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

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

只要加上这个:

-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或任何其他图像编辑器来应用阴影,如核心绘制。

在你的类中添加半径边界,如果它是一个块。因为默认情况下阴影将应用于块边界,即使你的图像有圆角。

border - radius: 4 px;

根据你的你的图像角改变它的边界半径。 希望这对你有所帮助。