如何显示带有两个不同大小/颜色边框的超链接图像？答案

【问题标题】：How can I show a hyperlinked image with two different size/color borders around it?如何显示带有两个不同大小/颜色边框的超链接图像？
【发布时间】：2010-10-31 04:39:18
【问题描述】：

我试图找出 css 来显示一个带有 1 像素黑色边框的图像，然后在其周围显示一个 9 像素的白色边框。有没有简单的方法可以做到这一点？

图像答案周围的 div 几乎可以工作，但我的图像两侧（在 1px 边框之外和 9px 边框内）仍然有很大的差距。似乎 div 标签由于某种原因被拉伸以适应整个窗口。

我最终在 img 样式选项中使用了填充/边框。

【问题讨论】：

标签： html css image

【解决方案1】：

<div style="border: 9px solid white;">
    <img src="foo.png" style="border: 1px solid black;"/>
</div>

【讨论】：

由于某种原因，div边框和img边框之间有很大的差距，不知道为什么
尝试在样式属性中添加 padding: 0 以消除差距
看看这个关于间距的问题：stackoverflow.com/questions/948145/…
填充技巧不起作用。另一个问题修复了我在图像下方的 1px 空间，但我的两边仍然有很大的差距 heh :)

【解决方案2】：

您不能使用纯 CSS 指定多个边框，您必须在其周围放置一个 div。 div 因为它是块级的。

类似

<div class="img-border"><img class="img" src="..." /></div>

CSS 将是：

.img{
  border: solid 1px black;
}

.img-border{
  border: solid 9px white;
}

使用类，您不必为每张图片重新键入内联 CSS。这就是我在 30 秒内想到的。希望对您有所帮助。

【讨论】：

【解决方案3】：

在img上，将背景设置为黑色并添加1px的填充，然后边框可以是9px的白色。

图片{ 背景颜色：#000; 填充：1px；边框：9px 实心#fff; }

只要您没有透明图像，就会出现双边框。

【讨论】：