我有一个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;
．.． 显示此图像的阴影，就像它是一个正方形一样。所以，我看到我的图像和正方形阴影，它不遵循物体的形式，显示在图像中。
有什么正确的方法吗?
当前回答
当我只需要“一点”阴影(轮廓不能超级精确)时，我经常使用的一个技巧是在图像下面放置一个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);" >
正如Dudley在他的回答中提到的，这可以通过webkit的dropshadow 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')";
}
这是一个就绪辉光悬停动画代码片段:
http://codepen.io/widhi_allan/pen/ltaCq
-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
也许你正在寻找这个。 http://lineandpixel.com/blog/png-shadow
img { png-shadow: 5px 5px 5px #222; }
只要加上这个:
-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);
}
