双框/边框？这在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

试试这个例子

希望它能帮助你。

.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的原始帖子所示).

黑色阴影的" 扩散半径 "可用于消除这种间隙(由Nirav Joshi巧妙地证明),但随后角落的曲率被放大,两个边界看起来不同.

要复制原始边框,我将使用::after生成绝对定位的伪元素并用于z-index将其放在原始元素后面.为了进一步确保边界完全重复,我喜欢Vadim Ovchinnikov的想法,即从原始元素继承边界颜色和半径.

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