Двойная коробка/бордюр? Возможно ли это в CSS?

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

введите здесь описание изображения


html css border box-shadow
person Solus    schedule 07.07.2017    source источник

Ответы (4)


arrow_upward
10
arrow_downward

Вы можете добиться этого с помощью псевдоэлемента абсолютной позиции. Также избегайте дублирования свойств через наследование 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>

person Vadim Ovchinnikov    schedule 07.07.2017
comment
Хорошее использование inherit для обеспечения согласованности. - person showdev; 07.07.2017
comment
Если я скопирую ваш, я могу также удалить свой избыточный ответ. Но, может быть, два разных примера будут полезны, например, если кто-то хочет по-разному стилизовать две границы. Пожать плечами - person showdev; 07.07.2017
comment
Работал отлично. Большое спасибо! - person Solus; 08.07.2017

arrow_upward
5
arrow_downward

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

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

Чтобы дублировать исходную границу, я бы использовал ::after для создания абсолютно позиционированного псевдоэлемента и используйте 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>

person showdev    schedule 07.07.2017
comment
Все в порядке, ваш ответ гораздо более полный, потому что он фактически реализует предложение с использованием кода OP. - person TylerH; 07.07.2017

arrow_upward
4
arrow_downward

Попробуйте этот пример

Надеюсь, это поможет вам.

.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, а не правый угол.

person Nirav Joshi    schedule 07.07.2017
comment
Нет необходимости в префиксе поставщика box-shadow. Они для очень старых версий браузеров. - person Vadim Ovchinnikov; 07.07.2017
comment
Мне нравится это решение, за исключением того, что часть тени с радиусом распространения, кажется, усиливает кривизну углов относительно исходной границы. Это не совсем желательно для меня, но это может не иметь значения для других. - person showdev; 08.07.2017
comment
Попробуйте увеличить или уменьшить пиксели boxshadow в соответствии с вашими потребностями. Например, от 8 до 7 пикселей или 9 пикселей. - person Nirav Joshi; 08.07.2017
comment
Можете ли вы показать пример? Я имел в виду часть spread, часть 3px. Это делает углы более круглыми, чем исходная граница. Хотя ничего страшного. - person showdev; 08.07.2017

arrow_upward
0
arrow_downward

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

person ebraley    schedule 07.07.2017
comment
Попробую это. Спасибо! - person Solus; 07.07.2017