在CSS的PNG图象的阴影 [英] Drop shadow for PNG image in CSS

问题描述

我有一个PNG图片，有自由形式（非正方形）。

I have a PNG image, that has free form (non square).

我需要对此图片应用阴影效果。

I need to apply drop-shadow effect to this image.

标准方法...

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

...显示此图片的阴影，就像是一个正方形。所以，我看到我的形象和正方形阴影，不遵循对象的形式，显示在图像中。

... displays shadows for this image, like it is a square. So, I see my image and square shadow, that doesn't follows the form of object, displayed in image.

有没有办法正确？ p>

Is there any way to do it properly?

推荐答案

晚会有点晚了，但是，完全有可能在alpha蒙版的PNG周围创建真正的动态阴影，使用dropshadow-filter（用于Webkit），SVG（用于Firefox）和用于IE的DX过滤器的组合。

A little late to the party, but yes, it is totally possible to create "true" dynamic drop shadows around alpha masked PNGs, using a combination of dropshadow-filter (for Webkit), SVG (for Firefox) and DX filters for IE.

.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>

真正的阴影和阴影阴影之间的比较和。

Some comparisons between true drop-shadow and box-shadow and an article on the technique I've just described.

我希望这有助于！

这篇关于在CSS的PNG图象的阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！