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

【问题标题】：How can I make two different colored borders around an image?如何在图像周围制作两个不同颜色的边框？
【发布时间】：2013-08-10 01:24:12
【问题描述】：

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

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/

【问题讨论】：

2 个选项：img{padding:2px; background:#fff; border:8px solid (w/e color); 或 img{border:2px solid white; outline: 8px solid (color);

标签： image css background

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

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

【讨论】：