双box/border？这在 CSS 中可能吗？

Question

我正在尝试在 CSS 中重新创建此图像。

到目前为止，这是我从实验中得到的结果。我使用 box-shadow 作为第二个盒子。我不确定是否有更好的方法来做到这一点？

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

使用绝对定位的 ::after 或 ::before 伪元素，并使其 z-index 低于元素本身。

Answer 2

试试这个例子

希望对您有所帮助。

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

使用box-shadow背后的概念是一白一黑两个阴影重叠以模拟第二个黑色边框。但是黑色阴影只在它与白色阴影偏移的方向上可见，所以原始边框和黑色阴影之间明显存在间隙（如OP原始post所示）。

"spread radius" of the black shadow could utilized to eliminate this gap (cleverly ), 但随后角的曲率被放大，两个边框看起来不一样。

要复制原始边框，我会使用 ::after to generate an absolutely-positioned pseudo-element and use z-index to place it behind the original element. To further ensure that the border is duplicated exactly, I like 从原始元素继承边框颜色和半径。

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

Answer 4

您可以通过绝对位置伪元素来实现。还要通过 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>

双box/border？这在 CSS 中可能吗？

Double box/border? Is this possible in CSS?

html

css

border

box-shadow