2016-06-15 51 views
1

图像的阴影效果,这是JPG图片,

enter image description here如何给影子图像

这里是png图片,其中创建阴影:
enter image description here

我的代码是:

img.image-shadow { 
 
    \t box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4); 
 
    }
<body> 
 
    <img class="image-shadow" src="http://i.stack.imgur.com/CtIqi.png"> 
 
</body>

回答

2

尝试使用此方法添加图像下方的影子,

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

谢谢你,它的工作 – Saika

+0

欢迎@Sarika ... – frnt

1

您应该使用的,而不是box-shadow

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

这也包括在前面的一个SO文章drop-shadow属性:

CSS box shadow around a custom shape?

请注意,它没有得到广泛的支持,但还有其他方法可以实现你在SO链接中想要的东西。

+1

谢谢你,它的工作 – Saika

+0

没问题。我注意到@frnt比我更早地发布了他/她的回答,但是由于链接的原因,我会将其留在这里。 –

+0

Waw!印象深刻! – Mantisse

-2

您将不得不使用某种在线工具,首先在图像顶部创建一个SVG grapic形状,然后在形状上应用阴影。

我不知道这样的工具,但你必须考虑你想在CSS中做什么,然后在软件中准备你的图像。