html - 带有偏移的图像上的双内边框

Question

我正在尝试使用 CSS 在图像上重新创建这些边框。

我已经能够使用此 CSS 创建一个边框:

.bordered-image {
  position: relative;
  outline: 1px double white;
  outline-offset: -10px;
}

但我一直无法创建第二个边框。可以使用CSS吗？

Answer 1

希望下面的代码有帮助

body{
   padding:50px;
}
.box{
  width:300px;
  height:200px;
  border:1px solid red;
  position:relative;
}
.box:after{
  content:"";
  position:absolute;
  top:-4px;
  bottom:-4px;
  left:2px;
  right:2px;
  border:1px solid green;
}

<div class="box" >
</div>