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

Question

我正在试图找出css来显示一个带有1px黑色边框然后围绕它的9px白色边框的图像。有一个简单的方法吗？

div图像的答案几乎可以正常工作，但我的图像两侧仍然有很大的间隙（1px边框之外和9px边框内部）。看起来div标签由于某种原因而拉伸以适应整个窗口。

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

Answer 1

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

img {         背景色：＃000;         填充：1px的;         border：9px solid #fff;         }

只要您没有透明图像，这将提供双边框。

Answer 2

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

Answer 3

你不能用纯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秒内提出的。希望它有所帮助。