带有偏移的图像上的双内边框答案

【问题标题】：Double inner border over image with offsets带有偏移的图像上的双内边框
【发布时间】：2018-03-17 21:02:53
【问题描述】：

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

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

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

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

【问题讨论】：

2px double white ?

标签： html css image border

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

【讨论】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

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

【讨论】：

【解决方案5】：

试试这个：

.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;
}

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

【讨论】：