具有偏移的图像上的双内边框

Question

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

我已经能够使用这个CSS创建一个边框：

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

但是我无法创建第二个边框。是否可以使用CSS？

Answer 1

尝试以下代码

 <div class="module">
  </div>

-

body {
 padding: 20px;
 }

.module {
  width: 300px;
  height: 200px;
  position: relative;
  border: 1px solid blue; 
  margin: auto;
  }
.module:after {
  content: "";
  position: absolute;
  top: -3px;
  left: 1px;
  right: 1px;
  bottom: -3px;
  border: 1px solid black;
  margin:auto;
  }

Answer 2

希望以下代码有帮助

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>

Answer 3

img {
    border: 1px double black;
    padding: 64px;
    outline: 1px solid black;
    box-sizing: border-box;
    outline-offset: 20px;
}

Answer 4

这样的事情对你有用。您可能需要使用尺寸

body {
    background: black;

}

.bordered-image {
position: relative;
height: 300px;
width: 300px;
border: 1px solid white;
margin: auto;
}

.bordered-image:before {
position: absolute;
left:-6px;
top: 4px;
display: block;
content: ' ';
margin: auto;
height: 290px;
width: 310px;
border: 1px solid white;
}

Answer 5

试试这个：

＆＃13;

＆＃13;

.bordered-image {
background:black;
width:300px;
outline: 1px double white;
outline-offset: -10px;
}
.one {

width:300px;
height:300px;
 position:relative;
 border:1px solid white;
}
.one:after {
         content: "";
    width: 273px;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 11px;
    right: 2px;
    border: 1px solid white;
}

＆＃13;

<div class="bordered-image">
<div class="one">
</div>
</div>

＆＃13;

＆＃13;

＆＃13;