帶偏移量的圖像上的雙內邊框

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>

Answer 2

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

Answer 3

這樣的事情應該爲你工作。你可能有尺寸打

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

試試這個：

.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

試試下面的代碼

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