Двойной ящик/граница? Возможно ли это в CSS?

Я пытаюсь воссоздать это изображение в 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>

Ответ 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>

Ответ 2

Концепция концепции box-shadow состоит в том, что две тени, одна белая и одна черная, перекрываются, чтобы имитировать вторую черную границу. Но черная тень видна только в том направлении, из которого оно смещено от белой тени, поэтому между исходной границей и черной тенью наблюдается разрыв (как показано в оригинальной записи OP).

" радиус распространения" черной тени "можно было бы использовать для устранения этого пробела (ловко продемонстрированный Ниравом Джоши), но затем кривизна углов усиливается, и две границы выглядят по-разному.

Чтобы дублировать исходную границу, я бы использовал ::after для создания абсолютно позиционированного pseudo-element и используйте z-index, чтобы поместить его за исходный элемент. Чтобы еще раз убедиться, что граница точно повторяется, мне нравится идея Вадима Овчинникова о наследовании цвета и радиуса границы от исходного элемента.

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

Ответ 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>

Ответ 4

Используйте абсолютный позиционный:: после или:: перед псевдоэлементом и свой индекс z ниже самого элемента.