CSS中的双边框答案

【问题标题】：Double borders in CSSCSS中的双边框
【发布时间】：2012-03-13 02:03:48
【问题描述】：

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

问题是，我想区分简单的图片和相册。

这么简单的图片边框看起来就是这样

是否可以通过 css 或 CSS3 创建像相册边框（双边框，创建多个图像效果）的 facebook？

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

提前谢谢

【问题讨论】：

标签： html image css border

【解决方案1】：

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

【讨论】：

@epic_syntax 当然，给我一分钟左右。

【解决方案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;
}

【讨论】：

【解决方案3】：

您只需查看 Facebook 的来源即可弄清楚。这也可以：

http://jsfiddle.net/g9A6a/

【讨论】：

不是吗？看起来绝对完美。究竟是什么问题？

【解决方案4】：

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

这是一个 DEMO on jsfiddle

【讨论】：

【解决方案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;
}

【讨论】：