双框/边框？这是可能的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>