如何在图像周围制作两个不同颜色的边框？

Question

我希望能够在图像周围创建一个带有8px棕褐色边框的2px白色边框，该图像会随着图像的大小而自动变化。

article.post .wp-caption img, article.page .wp-caption img {
background: none repeat scroll 0 0 transparent;
border: 2px solid white;
margin: 0;
padding: 0;
}

如果你想看看这里的网站是链接： http://www.metnews.org/news/aurora-remembers-holmes-victims/

Answer 1

border: 2px solid white;
outline: 8px solid yellow;

outline属性的作用类似于外边框。

Answer 2

您还可以使用填充来获得第二个边框的效果。根据图像改变大小的部分，我认为你应该更好地解释你想要实现的目标。

padding: 2px;
background: white;
border: 8px solid #000;

Answer 3

或盒子阴影 - 您可以拥有任意数量的边框。糟糕的'老IE8和更少的不会得到漂亮的风格:(。

http://jsfiddle.net/ryanwheale/KmnUB/2/

img {
    /* Make sure to add vendor prefixes */
    box-shadow: 0 0 2px 2px white, 0 0 0px 10px tan;
}