2つの罫線が異なるサイズで重なっています

Question

下の例のように2つの罫線を設定する方法はありますか？私はポジショニングでしかできませんでした。私はここで新しいので、間違いがあれば謝罪します。

.border1 { 
 
    margin: 0 auto; 
 
    height: 300px; 
 
    width: 250px; 
 
    border: 9px solid red; 
 
    position: relative; 
 
} 
 

 
.border2 { 
 
    border: 9px solid blue; 
 
    height: 250px; 
 
    width: 300px; 
 
    position: absolute; 
 
    top: 12px; 
 
    left: -33px; 
 
}

<div class="border1"> 
 
    <div class="border2"></div> 
 
</div>

Answer 1

絶対は確かにここで良いと簡単な方法です。

2番目の境界ボックスのサイズを変更するために、擬似でのみ使用することもできます。

.border1 { 
 
    margin: 0 auto; 
 
min-height: 150px;/* allow it to grow */ 
 
    width: 250px; 
 
    padding:20px 0.5em; 
 
    border: 9px solid red; 
 
    position: relative; 
 
} 
 

 
.border2:before { 
 
content:''; 
 
    border: 9px solid blue; 
 
pointer-events:none;/* to allow clicking through else you may use a negative z-index */ 
 
    position: absolute; 
 
    top: 12px; 
 
bottom:12px; 
 
    left: -33px; 
 
right:-33px; 
 
}

<div class="border1 border2"> 
 
add anything here instead setting height 
 
</div>

Answer 2

あなたは、不必要な計算をせずにフレキシボックスでそれを行うことができます。

.border1 { 
 
    margin: 0 auto; 
 
    height: 300px; 
 
    width: 250px; 
 
    border: 9px solid red; 
 
    display: flex; /* added */ 
 
    justify-content: center; /* horizontal alignment/centering */ 
 
    align-items: center; /* vertical alignment/centering */ 
 
} 
 
    
 
.border2 { 
 
    flex: 0 0 300px; /* flex-basis(width) */ 
 
    border: 9px solid blue; 
 
    height: 250px; 
 
}

<div class="border1"> 
 
    <div class="border2"></div> 
 
</div>

Answer 3

これは異なるアプローチです。私は第2ボーダーとしてボックスシャドーを使用し、もう2番目のボーダーのために2番目のdivを必要としません。

.border{ 
 
    margin:0 auto; 
 
    height:300px; 
 
    width:250px; 
 
    border:9px solid red; 
 
    position:relative; 
 
    box-shadow: 0 0 0px 9px blue; 
 
    }

<div class="border"></div>