雙框/邊框？這是可能的CSS？

Question

我試圖在CSS中重新創建這個圖像。

這是我從實驗中得到的，到目前爲止。我用箱子陰影作爲第二個箱子。我不確定是否有更好的方法來做到這一點？

h4 { 
 
    font-family: sans-serif; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    color: black; 
 
    letter-spacing: 2px; 
 
    padding: 20px 15px; 
 
    background: white; 
 
    box-shadow: 10px 5px 0px 0px #ffffff, 11px 7px 0px 2px #000000; 
 
}

<h4>3. Scouting for a location</h4>

Answer 1

您可以通過絕對定位僞元素實現這一目標。同時避免通過CSS繼承的屬性重複。

.border { 
 
    text-align: center; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    color: black; 
 
    letter-spacing: 2px; 
 
    padding: 20px 15px; 
 
    margin: 15px 15px; 
 
    background: white; 
 
    
 
    position: relative; /* new */ 
 
} 
 

 
/* new */ 
 
.border:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    background: inherit; 
 
    border-radius: inherit; 
 
    border: inherit; 
 
    left: 2px; 
 
    top: 2px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
}

<div class="border">3. Scouting for a location</div>

Answer 2

使用絕對定位::後或::僞元件之前和具有其的z-index比元件本身低。

Answer 3

試試這個例子

希望它能幫助你。

.border { 
 
text-align: center; 
 
border: solid 3px black; 
 
border-radius: 5px; 
 
text-decoration: none; 
 
font-weight: 600; 
 
color: black; 
 
letter-spacing: 2px; 
 
padding: 20px 15px; 
 
margin: 15px 15px; 
 
background: white; 
 
-webkit-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000; 
 
-moz-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000; 
 
box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000; 
 
}

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

編輯

這裏，現在你可以看到我做box-shadow到3px，不再右側角落。

Answer 4

box-shadow概念背後的概念是兩個陰影，一個白色和一個黑色重疊，以模擬第二個黑色邊框。但黑影只能從偏離白影的方向看到，所以原始邊界與黑影之間存在明顯的差距（如OP原文中所示）。

黑色陰影的「spread radius」可以用來消除此間隙（巧妙地demonstrated by Nirav Joshi），但角落的曲率被放大並且兩個邊框看起來不同。

要複製原始邊框，我會使用::after生成絕對定位的pseudo-element並使用z-index將其放置在原始元素的後面。爲了進一步確保邊框完全重複，我喜歡從原始元素繼承邊框顏色和半徑的Vadim Ovchinnikov's idea。

.border { 
 
    position: relative; 
 
    text-align: center; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    color: black; 
 
    letter-spacing: 2px; 
 
    padding: 20px 15px; 
 
    margin: 15px 15px; 
 
    background: white; 
 
} 
 

 
.border::after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 3px; 
 
    left: 3px; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    z-index: -1; 
 
}

<h4 class="border">3. SCOUTING FOR A LOCATION</h4>