CSS中PNG图像的阴影

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

我需要将阴影效果应用于此图像

标准方法

-o-box-shadow:12px 12px 29px#555；
-icab盒影：12px 12px 29px#555；
-khtml盒影：12px 12px 29px#555；
-moz盒阴影：12px 12px 29px#555；
-网络工具包盒阴影：12px 12px 29px#555；
盒影：12px 12px 29px#555；

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

---

有什么方法可以正确处理吗？

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

如果您有>100个图像需要阴影，我建议使用命令行程序。使用此功能，只需键入一个命令，即可将形状的阴影应用于100幅图像！例如：

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

上面的（shell）命令获取当前目录中的每个.png文件，应用放置阴影，并将结果保存在shadow/目录中。如果你不喜欢生成的阴影，你可以调整参数很多；首先看一下，一般有很多很酷的例子，可以对图像进行处理

---

如果您将来改变了对放置阴影外观的看法-只需一个命令即可生成具有不同参数的新图像：-）

如果是块，请在类中添加带半径的边框。因为默认情况下，阴影将应用于块边界，即使图像具有圆角

边界半径：4px

根据您的图像角更改其边界半径。
希望能有所帮助。
当我最初发布这篇文章时，这是不可能的，所以这是解决方法。现在我只建议使用其他答案。

没有办法精确地获得图像的轮廓，但是你可以在图像后面的中间用一个div来伪造它

如果我的技巧不起作用，那么你必须切割图像，并对每个小图像进行处理。（图像越多，阴影看起来越精确）
但对于大多数图像来说，只有一个img就可以了

你需要做的是像这样在你的img上画一个环绕的div

<div id="imgWrap">
    <img id="img" scr="imgLocation">
</div>

现在定位imgWrap以定位原始img。。。
要使img的阴影居中，可以将前两个值弄乱
盒子的阴影使它们变成负片。。。。
或者你可以绝对定位img和阴影div
使img顶部和左侧值=0
阴影div值分别为img宽度和高度的一半

如果这看起来很可怕，切掉你的img，再试一次

（如果你不想让img后面的阴影仅仅出现在轮廓上，那么你需要让你的img不透明，让它看起来像是透明的，这并不难，你可以评论，我稍后会解释）
有一个建议的功能，你可以用它来处理任意形状的阴影。您可以在这里看到，由Lea Verou提供：


虽然浏览器支持很少。
派对晚了一点，但是是的，完全可以使用dropshadow过滤器（用于Webkit）、SVG（用于Firefox）和IE的DX过滤器组合，在alpha屏蔽PNG周围创建“真正”的动态阴影

.shadowed{
-webkit过滤器：阴影（12px 12px 25px rgba（0,0,0,0.5））；
过滤器：url（#放置阴影）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Dropshadow（OffX=12，OffY=12，Color='#444'）”；
过滤器：“progid:DXImageTransform.Microsoft.Dropshadow（OffX=12，OffY=12，Color='#444'）”；
}



和

我希望这有帮助
 当我只需要“一点”阴影时，我经常使用的一个技巧是在图像下放置一个具有100%黑色到100%透明的径向填充的DIV。DIV的CSS类似于：

.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 */
  }

这将在320x320 DIV上创建一个圆形的黑色淡出“点”。如果缩放DIV的高度或宽度，将得到相应的椭圆形。非常好地创建如瓶子或其他圆柱状形状下的阴影

这里有一个绝对难以置信的超级优秀工具来创建CSS渐变：


当你使用它时，做一个礼貌性的广告点击。（不，我与之无关。但是礼貌性点击应该成为一种习惯，特别是对于你经常使用的工具来说……只是说……因为我们都在网上工作……）
也许你正在搜索这个。

正如Dudley在本文中提到的，webkit的drop shadow 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')";
}

.shadowed{
-webkit过滤器：阴影（12px 12px 25px rgba（0,0,0,0.5））；
过滤器：url（“数据：image/svg+xml；utf8，#drop shadow”）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Dropshadow（OffX=12，OffY=12，Color='#444'）”；
过滤器：“progid:DXImageTransform.Microsoft.Dropshadow（OffX=12，OffY=12，Color='#444'）”；
}
只需添加以下内容：

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


.home选项卡项img{
-webkit过滤器：投影（5px 5px 5px#fff）；
过滤器：投影（5px 5px 5px#fff）；
}
是的，可以在CSS或内联中使用：


img{
宽度：150px；
-webkit过滤器：投影（5px 5px 5px#222）；
过滤器：投影（5px 5px 5px#222）；
}
在我的例子中，它必须在现代移动浏览器上工作，具有不同形状和透明度的PNG图像。我使用图像的副本创建了阴影。这意味着我有两个相同图像的
img
元素，一个在另一个之上（使用
position:absolute
），并且
-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); 
}

.image-shadow {
  filter: blur(10px) brightness(-100);
  -webkit-filter: blur(10px) brightness(-100);
  opacity: .5;
}

box-shadow: -2px 6px 12px 6px #CCCED0;

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