Всех приветствую на моём посте. Здесь я вам расскажу о таком интересном и необычном трюке CSS — Как создать несколько границ на одном блоке (не только блоке).

Скажу сразу, мы не будем использовать свойство border, так как у него нет возможности добавлять несколько границ. Нам придётся использовать другие свойства, но пойдём по порядку.

Еще когда спецификация Backgrounds & Borders Level 3 была на стадии разработки стоял огромный вопрос — добавлять ли возможность использовать несколько границ. Разработчики сошлись на мнении что не так часто веб разработчикам не так часто придётся добавлять несколько границ. В крайнем случае они могут воспользоваться border-image. Однако border-image не очень гибки в настройке, поэтому веб-разработчикам приходилось вкладывать несколько элементов в друг друга что бы достичь нужного эффекта. К счастью уже сейчас есть намного более хороший способ

1 Способ — box-shadow

Я думаю многие уже знают как пользоваться свойством box-shadow. Но не многие знают что у него есть 4 параметр, называемый spread radius (радиус размытия). Этот параметр делает тень больше если значение положительное, и меньше если отрицательное.

Положительный радиус размытия в сочетании с нулевым смещением и нулевым размытием создаёт очень уж похожую на рамку тень.



Но это наверно не впечатляет так как такую рамку можно создать с использованием того же border.

border: 5px solid red;

Но хорошая новость в том что «теней» можно добавлять несколько, поэтому добавить вторую границу не составит труда.

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #731;
  box-shadow:  0 0 0 5px red, 0 0 0 10px green;
}

Только здесь главное помнить что эти тени накладываются на друг друга и поэтому несмотря на то что вторая тень — 10px, в результате она той же ширины что и красная так как 5px зелёной тени закрывает красная тень шириной 5px. Поэтому от зелёной осталось видным только половина.

Решение с box-shadow подходит в больше части случаев, но есть несколько тонкостей работы с ними:

• Тени работают не так как границы. Они не влияют на окружающий макет, даже если указать box-sizing: border-box. Но имитировать пространство которая бы заняла рамка можно используя поля, то есть margin.
• Обратите также внимание на то что события мыши (клик, наведение и т. д.) также не умеют перехватываться через такие рамки

2 Способ — outline

В тех случаях если нам нужны только две рамки то можно воспользоваться свойством outline. В этом случае одну рамку мы задаём используя border, а вторую через outline. Плюс использования outline в том что мы можем её настраивать также как и border. То есть мы можем установить стиль второй нашей рамке, тогда как метод box-shadow может создавать только сплошные рамки. Вот как создать рамку из предыдущего примера используя outline:

  margin: 50px;
  width: 100px;
  height: 100px;
  background: #731;
  border: 5px solid red;
  outline: 5px solid green;

Также у outline есть своя особенность. К блоку можно добавить свойство outline-offset в котором можно указать расстояние границы от блока. Также он может принимать отрицательные значения. Вот чего можно добиться отрицательными значениями:

div {
  margin: 50px;
  width: 100px;
  height: 100px;
  background: #731;
  outline: 3px dashed #fff;
  outline-offset: -10px;
}

Вы также можете посмотреть видео объяснение, в котором я подробно разбираю как создать несколько рамок:


Спасибо за прочтение. Всем пока!