如何用CSS實現照片「堆疊」邊框效果？

Question

我希望能夠添加一個類到圖像添加一個邊框，使他們看起來像一堆照片。有人知道怎麼做嗎？

說明：理想情況下，堆棧顯示爲here但它不需要交互式，只需要爲單張照片工作。如果需要的話，我也不介意使用javascript（儘管jQuery將是首選）。

Answer 1

「深度」影響可能是某種類型的drop shadow。你是否需要旋轉照片以及「凌亂的照片堆」效果，或者你在尋找「整齊堆疊」的外觀？

的「混亂照片堆」的效果在我看來，分解成三個部分：

1. 將用於「寶麗來」看圖像後面的背景（在其他意見解釋
2. 放點對於「深度」效果的圖像背後的陰影（我上面和其他意見
3. 旋轉圖像。我從來沒有這樣做解釋，但它看起來像有人所編碼的Jquery plugin你正在尋找。

Answer 2

將您的IMG標籤置於嵌套的DIV元素集中（div的數量將決定堆棧中的照片數量）。然後使用CSS設置邊框和邊距，以便DIV元素逐漸變大。通常你會在底部和右側添加更多的填充。

Answer 3

CSS3它受到所有人的支持，但您可能需要查看border-image。

Answer 4

在圖像周圍放置一個div，然後定義2種樣式。

<div class="img-shadow"><img ...></div> 

.img-shadow {style.css (line 456) 
background-color:#505050; 
float:left; 
margin:5px 0 0 0; 
} 
.img-shadow img {style.css (line 461) 
background-color:#FFFFFF; 
border:3px solid #000000; 
display:block; 
margin:-8px 8px 8px -8px; 
padding:10px; 
position:relative; 
} 

在.IMG陰影類

，定義你的背景這是爲你的形象夠大，看起來像的照片堆棧的圖形。以上使得它看起來像照片投下陰影。

Answer 5

下面是我的建議，它有一個清晰和簡單的CSS，導致完美的照片堆棧。

http://dabblet.com/gist/2023431