CSS中的双边框

Question

我正在从头开始创建基于Javascript的PHP照片库

问题是，我想在简单的图片和相册之间做出改变。

如此简单的图片边框看起来像那样

可以通过css或CSS3创建像照片相册边框（双边框，创建多个图像效果）的脸书吗？

P.S不知道是否可以使用旧的CSS标准。我的意思是，CSS3可能会这样做，但它不会向后兼容。另一方面，目前我的php端生成100x100像素拇指。如果我要增加拇指的大小，我需要一些不会被破坏的东西。

提前谢谢

Answer 1

使用:before或:after等伪元素，例如： 事实证明，大多数浏览器don't like :before on images因为它不是包含文本的元素。如果你在替代元素（如div）上执行此操作，仍然可以执行此操作，并将div的背景设置为原始图像。或者，您可以尝试： http://jsbin.com/otivaj/edit#html,live

Answer 2

这是你要找的吗？

jsfiddle

HTML：

<div class="facebook-album"></div>

CSS：

.facebook-album, .facebook-album:before
{
    background: red;
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 3px solid #FFF;
    box-shadow: 0 0 0 1px #999;
    position: relative;
}
.facebook-album:before
{
    margin: 0;
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    background: white;
    z-index: -1;
}

Answer 3

你可以看看Facebook的消息来源来解决这个问题。这也有效：

http://jsfiddle.net/g9A6a/

Answer 4

是的，你绝对可以用CSS做到这一点。看起来你的所有图像都是相同的尺寸，这将使这非常简单。只需将<img>置于包含position: relative;的元素和偏移量内。容器和图像都应该有一个边框，你需要填充和偏移。根据子图像的尺寸设置包含元素的宽度和高度。

这是一个 DEMO on jsfiddle

Answer 5

我不确定你能用CSS2来达到那个效果。如果添加更多标记是一个选项，我会这样做：

<ul>
<li><img></li>
</ul>

li {
    position: relative; 
    border: 1px solid gray;
}
img {
    padding: 6px;
    border: 1px solid gray;
    position:absolute;
    top:6px;
    left: 6px;
    background-color:white;
}