在我的例子中，它必须在现代移动浏览器上工作，使用不同形状和透明度的PNG图像。我使用图像的副本创建了投影。这意味着我有两个相同图像的img元素，一个在另一个上面(使用position: absolute)，后面的一个应用了以下规则:

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

这包括亮度滤镜，以使底部图像变暗，以及模糊滤镜，以投射阴影通常具有的模糊效果。然后使用50%的不透明度来软化它。

这可以应用跨浏览器使用moz和ms标志。

例如:https://jsfiddle.net/5mLssm7o/

您不能在所有浏览器上可靠地执行此操作。微软不再支持DX过滤器作为IE10+，所以没有一个解决方案在这里完全工作:

https://msdn.microsoft.com/en-us/library/hh801215 (v = vs.85) . aspx

唯一能在所有浏览器中可靠工作的属性是box-shadow，它只是把边框放在你的元素上(例如div)，结果是一个方形边框:

box-shadow: horizontalOffset verticalOffset blurDistance spreadDistance color inset;

e.g.

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

如果你碰巧有一个“正方形”的图像，但有统一的圆角，投影使用border-radius，所以你可以一直在div中模拟你的图像的圆角。

下面是box-shadow的微软文档:

https://msdn.microsoft.com/en-us/library/gg589484 (v = vs.85) . aspx

只要加上这个:

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

当我只需要“一点”阴影(轮廓不能超级精确)时，我经常使用的一个技巧是在图像下面放置一个DIV，用100%黑到100%透明的径向填充。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渐变:

http://www.colorzilla.com/gradient-editor/

ps:当你使用它的时候，做一个礼貌的广告点击。(不，我不是它的成员。但是礼貌地点击应该成为一种习惯，特别是对于你经常使用的工具……你……因为我们都在网络上工作…)

是的，可以使用滤镜:dropShadow(x y blur?传播?颜色?)，无论是在CSS或内联:

img { 宽度:150 px; -webkit-filter: drop-shadow(5px 5px 5px #222); 滤镜:投影(5px 5px 5px #222); ｝ < 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);滤镜:投影(5px 5px 5px #222);" >

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

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

不过，浏览器支持很少。