Question

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

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

有没有办法正确地做到这一点？

Answer 1

派对有点晚，但是，使用dropshadow过滤器（适用于Webkit），SVG（适用于Firefox）和DX过滤器的组合，完全有可能在alpha蒙版PNG周围创建“真正的”动态阴影效果对于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和an article on the technique I've just described。

我希望这有帮助！

Answer 2

是的，可以在CSS或内联中使用filter: dropShadow(x y blur? spread? color?)：

＆＃13;

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

＆＃13;

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

＆＃13;

Answer 3

如果您有> 100张想要投影的图像，我建议您使用命令行程序ImageMagick。有了这个，您只需键入一个命令即可将形状阴影应用于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 /目录中。如果你不喜欢生成的阴影，你可以调整很多参数;首先看一下documentation for shadows，一般usage instructions有很多可以对图像做的很好的例子。

如果您将来改变关于阴影外观的想法 - 这只是生成具有不同参数的新图像的一个命令： - ）

Answer 4

正如Dudley在his answer中提到的，这可以通过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')";
}

Answer 5

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

这对我很有用。有一点需要注意的是，你需要全彩色（＃222222）三个字符不起作用。

Answer 6

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

border-radius: 4px;

根据您的图像角改变其边框半径。希望这有帮助。

Answer 7

只需添加：

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

Answer 8

这是现成的辉光悬停动画代码段：

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

-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));

Answer 9

当我最初发布时，它不可能，所以这是解决方法。现在我只是建议使用其他答案。

无法准确获取图像的轮廓，但您可以使用中间图像后面的div来伪造它。

如果我的技巧不起作用，那么你必须剪切图像，并为每一个小图像做。（图像越多，阴影看起来越准确）但是对于大多数图像来说，只需要一个img就可以了。

你需要做的是在你的img周围放一个包裹div，就像这样

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

然后你在换行中放入一个空的分隔符（这将作为阴影）

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

然后你必须使用CSS在阴影后面显示阴影：

#img {
    z-index: 1;
}

#shadow {
    z-index: 0; /*make this value negative if doesnt work*/
    box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
    width: 0;
    height: 0;
}

现在定位imgWrap定位原始img ... 为了使img的阴影居中，你可以弄乱前两个值盒子阴影使他们消极...... 或者你可以绝对定位img和shadow div 使img顶部和左侧值= 0 阴影div值分别是img宽度和高度的一半。

如果这看起来很可怕，请将你的img剪掉并再试一次。

（如果你不希望img背后的阴影只是在轮廓上，那么你需要让你的img不透明并让它表现得好像它是透明的并不那么难，你可以评论我会解释后）

Answer 10

在我的情况下，它必须在现代移动浏览器上工作，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/

Answer 11

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

Answer 12

有一个建议的功能，你可以用于任意形状的阴影。你可以在这里看到它，由Lea Verou提供：

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

浏览器支持很少。

Answer 13

我经常使用的一个技巧，当我只需要“一点”阴影（读取：轮廓不能超精确）时，在图像下放置一个径向填充100％-black-to-100％-transparent的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渐变：

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

ps：使用时请进行礼貌的广告点击。（并且，不，我没有附属它。但礼貌点击应该成为一种习惯，特别是对于你经常使用的工具......只是说...因为我们都在网上工作...... ）