3 способа создания рамки у элемента в CSS

Работая над макетом сайта или посадочной страницы мы, как правило, визуально отделяем блоки с различным содержанием друг от друга с помощью:

• фоновых картинок
• фоновых одноцветных заливок
• фоновых градиентных заливок
• рамок
• комбинацией вышеперечисленного

В этой статье поговорим о рамках. В CSS есть 3 свойства, которые можно использовать для их создания у элемента:

1. border
2. outline
3. box-shadow

Понятно, что раз их три, то значит, что они чем-то отличаются друг от друга, а следовательно по-разному должны использоваться. Давайте разберемся в каких ситуациях одни свойства будут работать лучше чем другие и наоборот.

Для начала вспомним как они формируются в блочной модели CSS.

border — непосредственно обрамляет элемент (влияет на общий размер элемента при вычислениях).

outline — следует сразу после border, но располагается поверх box-shadow и margin (не влияет на общий размер элемента).

box-shadow — следует сразу после border, покрывает некоторое пространство в заданном для него направлении (не влияет на общий размер элемента).

Как видите, важно знать о порядке их следования и нахождения в стеке, поскольку в тех ситуациях, когда, например, нужно будет использовать их вместе у одного элемента, некоторые свойства могут пропасть из вида, скрывшись под другими, хотя, на самом деле, присутствовать.

Использование свойства border

Начнем со свойства border.

Важный момент, который нужно обязательно отметить, разбирая это свойство: оно по умолчанию влияет на размер элемента — его итоговые ширину и высоту, значения которые рассчитывает браузер для вывода элемента на экран!

Минимальный синтаксис для этого свойства, чтобы оно заработало:

border: 1px solid;

Оптимальный синтаксис, который чаще всего используется:

border: 10px solid #198754;

Свойство border лучше всего использовать в ситуациях, когда:

• необходимо скруглить углы у рамки элемента
• важно учитывать его влияние на вычисляемый браузером размер элемента

Использование свойства outline

В отличие от border это свойство вообще не влияет на вычисляемый браузером размер элемента.

Минимальный синтаксис, который нужно написать, чтобы оно появилось на экране:

outline: solid;

Оптимальный, чаще всего используемый синтаксис:

outline: 10px solid #e1987c;

Браузеры в собственных стилях, обычно, используют это свойство для отображения состояния фокусировки на интерактивных элементах, типа ссылок и кнопок.

Необходимо также заметить, что у свойства outline есть проблемы с наследованием скругления углов от border-radius. Поэтому, если нужно скруглять: используйте border-radius вместо outline. Скругление будет гарантировано.

Теперь о том, как и когда это свойство лучше использовать. Применяйте outline в ситуациях, когда:

• вам не нужно учитывать его влияние на вычисляемый браузером размер элемента
• должна быть рамка, но не нужно скруглять ее углы

Использование свойства box-shadow

Хотя из названия этого свойства не следует, что его можно применять для создания рамки у элемента, тем не менее это так.

Минимальный синтаксис, чтобы оно появилось на экране браузера:

box-shadow: 2px 5px #000;

Оптимальный синтаксис, который применяется чаще всего:

box-shadow: 2px 5px 8px #000;

Синтаксис для создания рамки:

box-shadow: 0 0 0 20px #6cc39b;

Чтобы создать рамку у элемента с помощью box-shadow необходимо значения x, y и размытие сделать равными 0, а значение распространения должно быть больше 0, то есть положительным.

Кроме того, как видно из примера, свойство border-radius влияет на скругление углов рамки, создаваемой box-shadow!

Что касается использования box-shadow для создания рамки, то это лучше всего делать в ситуациях:

• когда нужно анимировать толщину рамки, при этом не влияя на вычисляемые браузером размеры элемента в макете
• в декоративно-оформительских целях, когда банально не хватает border и outline

Однако, box-shadow не в состоянии дублировать все возможности предоставляемые свойствами border и outline. Это необходимо иметь ввиду.

Полезный совет

Во время устранения ошибок в коде CSS, которые возникают время от времени из-за неправильного позиционирования элементов в макете или, например, работы свойства overflow советуют использовать вот такой код:

* { border: 1px solid red; }

Он добавляет красную однопиксельную рамку к каждому элементу на странице. В результате легко обнаружить «виновника» нарушений в макете, который выделяется из общей массы элементов, выступая за заданные границы.

Но, сделав так, как мы уже выяснили ранее, эти рамки увеличат размеры элементов. В результате ситуация может еще больше усугубиться.

Выход: использовать свойство outline, которое не влияет на вычисляемый размер элемента. То есть, рамки будут, но на размеры элементов в макете они оказывать влияния не будут:

* { outline: 1px solid red; }

Как сделать рамку с градиентной заливкой

Из трех выше обсуждаемых свойств только border способно это сделать.

Для реализации градиента воспользуемся редко используемым свойством border-image. Именно оно позволит сделать нам градиентную заливку, поскольку технически в CSS градиенты, как не удивительно, являются картинками!

Используйте следующий код для создания этого эффекта:

div {
  border: 10px solid;
  border-image: linear-gradient( to right, #198754, #e1987c) 1;
}

Сначала для контейнера div мы определяем border, затем свойство border-image, значением для которого будет линеарный градиент с одной, но существенной поправкой: после записи градиента ставим цифру 1, чтобы размер градиента оставался неизменным.

Единственный недостаток у этого приема: невозможность скруглять углы.

Если информация в этой статье оказалась для вас полезной или у вас возникли вопросы — напишите об этом, пожалуйста, в комментариях. С удовольствием ответим и поможем.