如何在图像中添加2个轮廓/边框

Question

如何使用css创建两个轮廓或边框，如下面的演示图片？

我可以根据以下代码创建一个大纲：JSFIDDLE CODE

CSS：

img {
    outline: 1px solid #fff;
    outline-offset: -9px;
}

Answer 1

＆＃13;

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  width: auto;
  height: auto;
  margin: 0;
  line-height: 0;
  display: inline-block;
  color: #fff;
}
.wrapper:before {
  content: '';
  position: absolute;
  top: 2%;
  right: 2%;
  bottom: 2%;
  left: 2%;
  border: 1px solid currentColor;
}
.wrapper:after {
  content: '';
  position: absolute;
  top: 3%;
  right: 3%;
  bottom: 3%;
  left: 3%;
  border: 1px solid currentColor;
}
.wrapper__img {
  height: 100%;
}

＆＃13;

<div class="wrapper">
  <img class="wrapper__img" src="http://s.hswstatic.com/gif/2007-hybrid-car-pictures-3.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

＆＃13;

＆＃13;

SELECT * FROM ( SELECT *, ROW_NUMBER() OVER (ORDER BY [TEST].[dbo].[Registration].[RegistrationNo]) as row 
FROM [TEST].[dbo].[Registration] ) a 
WHERE row > 5 and row <= 10

＆＃13;

img {
    outline: 4px double #fff;
    outline-offset: -12px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

不幸的是，IE doesn't support outline offset。你最好将图像用作CSS中的背景并使用一些内部div作为边框。

* {
  box-sizing: border-box;
}
.pad {
  padding: 5px;
}
.image {
  background: url('http://s.hswstatic.com/gif/2007-hybrid-car-pictures-3.jpg') no-repeat;
  width: 400px;
  height: 266px;
}
.inner-border {
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
}

<div class="image pad">
  <div class="inner-border pad">
    <div class="inner-border"></div>
  </div>
</div>