我有一个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);" >

这是一个就绪辉光悬停动画代码片段:

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

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

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

如果你有>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/目录中。如果你不喜欢生成的阴影,你可以调整参数很多;从查看阴影的文档开始,一般使用说明中有很多可以对图像进行处理的很酷的例子。

如果你在未来改变了你对阴影的外观的想法-这只是一个命令,生成新的图像与不同的参数:-)

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

border - radius: 4 px;

根据你的你的图像角改变它的边界半径。 希望这对你有所帮助。