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

Question

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

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

或 box-shadow - 您可以拥有任意数量的边框。可怜的'旧 IE8 和更少的 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;
}