Doppelte innere Grenze über Bild mit Offsets

Question

Ich versuche, diese Grenzen über ein Bild mit CSS neu zu erstellen.

ich in der Lage gewesen, indem Sie diese CSS eine Grenze zu erstellen:

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

Aber ich habe es nicht gelungen, die zweite Grenze zu schaffen. Ist es möglich, CSS zu verwenden?

Answer 1

Hoffen, dass der folgende Code

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 2

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

Answer 3

so etwas wie dies sollte für Sie arbeiten kann. Sie könnten mit den Abmessungen haben diese

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 4

Versuchen zu spielen:

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

Answer 5

Versuchen Sie den Code unten

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