Question

带阴影效果的图像，这是JPG图像，

这是png图像在哪里创建阴影：

我的代码是：

＆＃13;

img.image-shadow {
  	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
  }

＆＃13;

<body>
  <img class="image-shadow" src="http://i.stack.imgur.com/CtIqi.png">
 </body>

＆＃13;

Answer 1

尝试此操作在图片下方添加阴影，

img{
-webkit-filter: drop-shadow(0px 16px 10px rgba(0,0,225,0.6));
-moz-filter: drop-shadow(0px 16px 10px rgba(0,0,225,0.6));
-ms-filter: drop-shadow(0px 16px 10px rgba(0,0,225,0.6)); 
-o-filter: drop-shadow(0px 16px 10px rgba(0,0,225,0.6));
 filter: drop-shadow(0px 16px 10px rgba(0,0,225,0.6)); 
}

Answer 2

您应该使用drop-shadow属性而不是box-shadow

http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow

以前的SO文章也涵盖了这一点：

CSS box shadow around a custom shape?

请注意，它没有得到广泛支持，但还有其他方法可以在SO链接中实现您想要的内容。

Answer 3

~~您必须使用某种在线工具，首先在图像上创建一个SVG图形，然后在形状上应用阴影。~~

~~我不知道这样的工具，但是~~在用软件准备图像之前，你必须考虑你想用CSS做什么。

如何在图像上给出阴影

3 个答案: