双框/边框？这在CSS中可行吗？

Question

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

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

cross apply

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;
}

Answer 1

你可以通过绝对位置伪元素来实现这一点。还要通过CSS继承来避免属性重复。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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>

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

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