2016-06-15 27 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中做什麼,然後在軟件中準備你的圖像。