blocks|key|1206963|text|这在css中是不可能的--图像是正方形的，所以阴影就是正方形的阴影。最简单的方法是使用photoshop/gimp或任何其他图像编辑器来应用阴影，如核心绘图。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1206964|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

This won't be possible with css - an image is a square, and so the shadow would be the shadow of a square. The easiest way would be to use photoshop/gimp or any other image editor to apply the shadow like core draw.

blocks|key|992591|text|如果你有超过100张图片需要阴影，我建议你使用命令行程序ImageMagick。有了它，你只需输入一条命令，就可以对100张图片应用形状下降阴影！例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|992592|for+i+in+"*.png";+do+convert+$i+'('+%2Bclone+-background+black+-shadow+80x3%2B3%2B3+')'+%2Bswap+-background+none+-layers+merge+%2Brepage+"shadow/$i";+done|code-block|syntax|javascript|992593|上面的(外壳)命令获取当前目录中的每个.png文件，应用阴影，并将结果保存在阴影/目录中。如果您不喜欢生成的阴影，可以对参数进行大量调整；从查看documentation+for+shadows开始，一般的usage+instructions有很多可以对图像进行处理的很酷的示例。|992594|如果您在将来改变了对投影外观的看法-这只是一个命令来生成具有不同参数的新图像:-)|992595|entityMap|0|LINK|mutability|MUTABLE|url|http://www.imagemagick.org/|1|http://www.imagemagick.org/Usage/blur/#shadow|2|http://www.imagemagick.org/Usage/^0|S|B|0|0|0|20|P|1|2V|I|2|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]|$A|17|B|18|1|19]]|C|$]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]|W|$5|P|Q|R|C|$S|X]]]]

If you have >100 images that you want to have drop shadows for, I would suggest using the command-line program <a href="http://www.imagemagick.org/" rel="noreferrer">ImageMagick</a>. With this, you can apply shaped drop shadows to 100 images just by typing one command! For example:

<pre><code>for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done
</code></pre>

The above (shell) command takes each .png file in the current directory, applies a drop shadow, and saves the result in the shadow/ directory. If you don't like the drop shadows generated, you can tweak the parameters a lot; start by looking at the <a href="http://www.imagemagick.org/Usage/blur/#shadow" rel="noreferrer">documentation for shadows</a>, and the general <a href="http://www.imagemagick.org/Usage/" rel="noreferrer">usage instructions</a> have a lot of cool examples of things that can be done to images.

If you change your mind in the future about the look of the drop shadows - it's just one command to generate new images with different parameters :-)

blocks|key|992647|text|如果它是一个块，在你的类中添加带半径的边框。因为默认情况下，阴影将应用于块边框，即使您的图像有圆角。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992648|border-radius:+4px;|offset|length|style|CODE|992649|根据你的图像角改变它的边框半径。希望这能有所帮助。|992650|entityMap^0|0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

Add border with radius in you class if its a block. because by default shadow will apply on block border, even if your image have rounded corner. 

<code>border-radius: 4px;</code> 

change its border radius according to your you image corner.
Hope this help.

blocks|key|1207153|text|有一个提议的功能，你可以用它来处理任意形状的阴影。你可以在这里看到，由Lea+Verou提供：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1207154|http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom|offset|length|1207155|然而，浏览器的支持是最低限度的。|1207156|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|2N|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

There's a proposed feature which you could use for arbitrarily shaped drop shadows. You could see it here, courtesy of Lea Verou:

<a href="http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom" rel="nofollow">http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom</a>

Browser support is minimal, though.

blocks|key|1207207|text|有点晚了，但是的，使用dropshadow-filter+(用于Webkit)，SVG+(用于Firefox)和DX+filters+(用于IE+)的组合，完全有可能在alpha蒙版PNG周围创建“真正的”动态投影阴影。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1207208|.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')";
}|code-block|syntax|javascript|1207209|

<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>|1207210|Some+comparisons+between+true+drop-shadow+and+box-shadow和an+article+on+the+technique+I've+just+described。|offset|length|1207211|我希望这能帮到你!|1207212|entityMap|0|LINK|mutability|MUTABLE|url|http://thenewcode.com/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison|1|http://thenewcode.com/600/Creating-a-True-CrossBrowser-Drop-Shadow-Effect-With-CSS3-&-SVG^0|0|0|0|0|1K|0|1L|1B|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]|$K|15|L|16|1|17]]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

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.

<pre class="lang-css prettyprint-override"><code>.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')";
}
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;!-- HTML elements here --&gt;

&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;filter id="drop-shadow"&gt;
 &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4"/&gt;
 &lt;feOffset dx="12" dy="12" result="offsetblur"/&gt;
 &lt;feFlood flood-color="rgba(0,0,0,0.5)"/&gt;
 &lt;feComposite in2="offsetblur" operator="in"/&gt;
 &lt;feMerge&gt;
 &lt;feMergeNode/&gt;
 &lt;feMergeNode in="SourceGraphic"/&gt;
 &lt;/feMerge&gt;
 &lt;/filter&gt;
&lt;/svg&gt;
</code></pre>

<a href="http://thenewcode.com/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison" rel="noreferrer">Some comparisons between true drop-shadow and box-shadow</a> and <a href="http://thenewcode.com/600/Creating-a-True-CrossBrowser-Drop-Shadow-Effect-With-CSS3-&amp;-SVG" rel="noreferrer">an article on the technique I've just described</a>.

I hope this helps!

blocks|key|992819|text|当我只需要一个“小”阴影时，我经常使用的一个技巧是在图像下面放置一个径向填充100%25黑色到100%25透明的DIV。DIV的CSS如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992820|.shadow320x320{++++
++++++++background:+-moz-radial-gradient(center,+ellipse+cover,+rgba(0,0,0,0.58)+0%25,+rgba(0,0,0,0.58)+1%25,+rgba(0,0,0,0)+43%25,+rgba(0,0,0,0)+100%25);+/*+FF3.6%2B+*/
++++++++background:+-webkit-gradient(radial,+center+center,+0px,+center+center,+100%25,+color-stop(0%25,rgba(0,0,0,0.58)),+color-stop(1%25,rgba(0,0,0,0.58)),+color-stop(43%25,rgba(0,0,0,0)),+color-stop(100%25,rgba(0,0,0,0)));+/*+Chrome,Safari4%2B+*/
++++++++background:+-webkit-radial-gradient(center,+ellipse+cover,+rgba(0,0,0,0.58)+0%25,rgba(0,0,0,0.58)+1%25,rgba(0,0,0,0)+43%25,rgba(0,0,0,0)+100%25);+/*+Chrome10%2B,Safari5.1%2B+*/
++++++++background:+-o-radial-gradient(center,+ellipse+cover,+rgba(0,0,0,0.58)+0%25,rgba(0,0,0,0.58)+1%25,rgba(0,0,0,0)+43%25,rgba(0,0,0,0)+100%25);+/*+Opera+12%2B+*/
++++++++background:+-ms-radial-gradient(center,+ellipse+cover,+rgba(0,0,0,0.58)+0%25,rgba(0,0,0,0.58)+1%25,rgba(0,0,0,0)+43%25,rgba(0,0,0,0)+100%25);+/*+IE10%2B+*/
++++++++background:+radial-gradient(ellipse+at+center,+rgba(0,0,0,0.58)+0%25,rgba(0,0,0,0.58)+1%25,rgba(0,0,0,0)+43%25,rgba(0,0,0,0)+100%25);+/*+W3C+*/
++++++++filter:+progid:DXImageTransform.Microsoft.gradient(+startColorstr='#94000000',+endColorstr='#00000000',GradientType=1+);+/*+IE6-9+fallback+on+horizontal+gradient+*/
++}|code-block|syntax|javascript|992821|这将在320x320+DIV上创建一个圆形的黑色淡出‘点’。如果你缩放DIV的高度或宽度，你会得到一个相应的椭圆。非常适合创建例如瓶子或其他圆柱体形状的阴影。|992822|这里有一个绝对令人难以置信的超级优秀的工具来创建CSS渐变：|992823|http://www.colorzilla.com/gradient-editor/|offset|length|992824|附言:当你使用它的时候，做一个礼貌的广告点击。(而且，不，我和它没有关系。但礼貌的点击应该成为一种习惯，特别是对于你经常使用的工具……只是说..。既然我们都在网上工作...)|992825|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|16|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@$M|12|N|13|1|14]]|A|$]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|L]]]]

A trick I often use when I just need "a little" shadow (read: contour must not be super-precise) is placing a DIV with a radial fill 100%-black-to-100%-transparent under the image. The CSS for the DIV looks something like:

<pre><code>.shadow320x320{ 
 background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
 background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
 background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
 background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 }
</code></pre>

This will create a circular black faded-out 'dot' on a 320x320 DIV. If you scale the height or width of the DIV you get a corresponding oval. Very nice to create eg shadows under bottles or other cylinder-like shapes.

There is an absolute incredible, super-excellent tool to create CSS gradients here:

<a href="http://www.colorzilla.com/gradient-editor/" rel="nofollow">http://www.colorzilla.com/gradient-editor/</a>

ps: Do a courtesy ad-click when you use it. (And, no,I'm not affiliated with it. But courtesy clicking should become a bit of a habit, especially for tool you use often... just sayin... since we're all working on the net...)

blocks|key|992906|text|也许你正在寻找这一点。http://lineandpixel.com/blog/png-shadow|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|992907|img+{+png-shadow:+5px+5px+5px+#222;+}|code-block|syntax|javascript|992908|entityMap|0|LINK|mutability|MUTABLE|url|http://lineandpixel.com/blog/png-shadow^0|B|13|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Maybe you are in search of this.
<a href="http://lineandpixel.com/blog/png-shadow" rel="nofollow">http://lineandpixel.com/blog/png-shadow</a>

<pre><code>img { png-shadow: 5px 5px 5px #222; }
</code></pre>

blocks|key|992969|text|正如Dudley在his+answer中提到的那样，这可以通过webkit的下影式CSS过滤器、Firefox的SVG和Internet+Explorer9-的DirectX过滤器来实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|992970|进一步的一步是内联SVG，消除额外的请求：|992971|.shadowed+{
++++-webkit-filter:+drop-shadow(12px+12px+25px+rgba(0,0,0,0.5));
++++filter:+url("data:image/svg%2Bxml;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')";
}|code-block|syntax|javascript|992972|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/12921987/1268612^0|9|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

As Dudley mentioned in <a href="https://stackoverflow.com/a/12921987/1268612">his answer</a> this is possible with the drop-shadow CSS filter for webkit, SVG for Firefox and DirectX filters for Internet Explorer 9-. 

One step further is to inline the SVG, eliminating the extra request:

<pre><code>.shadowed {
 -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
 filter: url("data:image/svg+xml;utf8,&lt;svg height='0' xmlns='http://www.w3.org/2000/svg'&gt;&lt;filter id='drop-shadow'&gt;&lt;feGaussianBlur in='SourceAlpha' stdDeviation='4'/&gt;&lt;feOffset dx='12' dy='12' result='offsetblur'/&gt;&lt;feFlood flood-color='rgba(0,0,0,0.5)'/&gt;&lt;feComposite in2='offsetblur' operator='in'/&gt;&lt;feMerge&gt;&lt;feMergeNode/&gt;&lt;feMergeNode in='SourceGraphic'/&gt;&lt;/feMerge&gt;&lt;/filter&gt;&lt;/svg&gt;#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')";
}
</code></pre>

blocks|key|1207461|text|只需添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1207462|-webkit-filter:+drop-shadow(5px+5px+5px+#fff);
+filter:+drop-shadow(5px+5px+5px+#fff);+|code-block|syntax|javascript|1207463|示例：|1207464|<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);+
}|1207465|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Just add this:

<pre><code>-webkit-filter: drop-shadow(5px 5px 5px #fff);
 filter: drop-shadow(5px 5px 5px #fff); 
</code></pre>

example:

<pre><code>&lt;img class="home-tab-item-img" src="img/search.png"&gt; 

.home-tab-item-img{
 -webkit-filter: drop-shadow(5px 5px 5px #fff);
 filter: drop-shadow(5px 5px 5px #fff); 
}
</code></pre>

blocks|key|993065|text|是的，可以在CSS或inline中使用filter:+dropShadow(x+y+blur?+spread?+color?)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|993066|​|993067|img+{
++width:+150px;
++-webkit-filter:+drop-shadow(5px+5px+5px+#222);
++filter:+drop-shadow(5px+5px+5px+#222);
}|code-block|syntax|javascript|993068|<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);+filter:+drop-shadow(5px+5px+5px+#222);">|993069|993070|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow())^0|J|18|J|18|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

Yes, it is possible using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()" rel="noreferrer"><code>filter: dropShadow(x y blur? spread? color?)</code></a>, either in CSS or inline:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>img {
 width: 150px;
 -webkit-filter: drop-shadow(5px 5px 5px #222);
 filter: drop-shadow(5px 5px 5px #222);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png"&gt;

&lt;img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);"&gt;</code></pre>
</div>
</div>

blocks|key|1207546|text|在我的例子中，它必须在现代移动浏览器上工作，具有不同形状和透明度的PNG图像。我使用图像的副本创建了投影。这意味着我有同一图像的两个img元素，一个在另一个之上(使用position:+absolute)，后面的一个应用了以下规则：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1207547|.image-shadow+{
++filter:+blur(10px)+brightness(-100);
++-webkit-filter:+blur(10px)+brightness(-100);
++opacity:+.5;
}|code-block|syntax|javascript|1207548|这包括亮度滤镜，以便使底部图像变暗，以及模糊滤镜，以便投射投影通常具有的模糊效果。然后应用50%25的不透明度来柔化它。|1207549|这可以使用moz和ms标志跨浏览器应用。|1207550|示例：https://jsfiddle.net/5mLssm7o/|1207551|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/5mLssm7o/^0|1U|3|2B|I|0|0|0|5|3|9|2|0|3|U|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|Q|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

In my case it had to work on modern mobile browsers, with a PNG image in different shapes and transparency. I created drop shadow using a duplicate of the image. That means I have two <code>img</code> elements of the same image, one on top of the other (using <code>position: absolute</code>), and the one behind has the following rules applied to it:

<pre><code>.image-shadow {
 filter: blur(10px) brightness(-100);
 -webkit-filter: blur(10px) brightness(-100);
 opacity: .5;
}
</code></pre>

This includes brightness filter in order to darken the bottom image, and a blur filter in order to cast the smudgy effect drop shadow usually has. Opacity at 50% is then applied in order to soften it. 

This can be applied cross browser using <code>moz</code> and <code>ms</code> flags.

Example: <a href="https://jsfiddle.net/5mLssm7o/" rel="nofollow noreferrer">https://jsfiddle.net/5mLssm7o/</a>

blocks|key|1207610|text|下面是现成的辉光悬停动画代码片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1207611|http://codepen.io/widhi_allan/pen/ltaCq|offset|length|1207612|-webkit-filter:+drop-shadow(0px+0px+0px+rgba(255,255,255,0.80));|code-block|syntax|javascript|1207613|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|13|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

Here is ready glow hover animation code snippet for this:

<a href="http://codepen.io/widhi_allan/pen/ltaCq" rel="noreferrer">http://codepen.io/widhi_allan/pen/ltaCq</a>

<pre><code>-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
</code></pre>

blocks|key|993253|text|img+{
++-webkit-filter:+drop-shadow(5px+5px+5px+#222222);
++filter:+drop-shadow(5px+5px+5px+#222222);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|993254|这对我来说很有效。有一件事需要注意，在IE中，你需要全色(#222222)三个字符是不起作用的。|unstyled|993255|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>img {
 -webkit-filter: drop-shadow(5px 5px 5px #222222);
 filter: drop-shadow(5px 5px 5px #222222);
}
</code></pre>

That worked great for me. One thing to note tho in IE you need the full color (#222222) three characters don't work.

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

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

The standard approach ...

<pre class="lang-css prettyprint-override"><code>-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;
</code></pre>

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

Is there any way to do it properly?

Drop shadow for PNG image in CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我有一个PNG图像，具有自由形式(非正方形)。我需要将阴影效果应用于此图像。标准方法..。-o-box-shadow:      12px 12px 29px #555;-icab-box-shadow:   12px 12px 29px #555;-khtml-box-shadow:  12px 12px 29px ...

问在CSS中放置PNG图像的阴影
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中放置PNG图像的阴影EN