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

Question

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

我可以按照这里的代码创建一个大纲:JSFIDDLE CODE

CSS:

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

Answer 1

*,
*: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%;
}

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