Question

我希望能够为添加边框的图像添加一个类，使它们看起来像一堆照片。有谁知道怎么做？

澄清：理想情况下显示的是here所显示的堆栈，但它不需要是交互式的，只需要为单张照片工作。如果需要，我也不介意使用javascript（虽然jQuery会更受欢迎）。

Answer 1

将IMG标记放在嵌套的DIV元素集中（div的数量将决定堆栈中照片的数量）。然后使用CSS设置边框和填充，以便DIV元素逐渐大于照片。通常，您将在底部和右侧添加更多填充。

Answer 2

“深度”影响可能是某种类型的drop shadow。您是否需要旋转照片以获得“杂乱的照片堆”效果，还是在寻找“整齐堆叠”的外观？

“麻烦的照片堆”效应在我看来分为三个部分：

在图像背后放置“宝丽来”外观（在其他评论中解释
在图像后面放置一个阴影以获得“深度”效果（在上面和其他评论中解释
旋转图像。我自己从未这样做，但看起来有人编写了你正在寻找的Jquery plugin。

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-shadow类中，为您的背景定义一个足够大的图形，并且看起来像一堆照片。以上看起来就像是照片投下阴影。

Answer 5

以下是我的建议，它有一个清晰简单的CSS，可以产生完美的照片堆栈。

http://dabblet.com/gist/2023431

如何用CSS实现照片“堆叠”边框效果？

5 个答案: