Рамка в CSS - варианты использования

Не так давно добавление рамок требовало обрезки изображений и длительной настройки CSS. Теперь ситуация изменилась. Несколько строк кода - это все что вам нужно, чтобы украсить изображение сложными рамками. Из этой статьи вы узнаете, как это делается.

Содержание

Свойства рамки изображения

Общий способ определения стиля рамок заключается в использовании предустановленных значений стилей: dotted, dashed, solid, double, groove, ridge, inset и outset.

Но вы можете пойти еще дальше и установить фоновые изображения для рамок с помощью следующих свойств CSS.

Свойство border-image-source

С помощью этого свойства назначается фоновое изображение для элемента рамки. Принимаемое значение – это URL-адрес изображения:

element {
  border-image-source: url('myimage.png');
}

Также это свойство отлично работает с градиентами CSS:

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

В браузере это выглядит примерно так:

Свойство border-image-source
Тень текста CSS - примеры использования

Если вы установите для этого свойства значение none, или изображение не может быть отображено, то браузер будет использовать значения свойства border-style. Поэтому нужно использовать border-style в качестве запасного варианта.

Изображение, которое вы используете, не обязательно должно совпадать с рамкой по ширине и высоте. CSS установит нужные размеры автоматически.

Свойство border-image-slice

После того как вы выбрали изображение с помощью border-image-source, вы применяете его к рамке, используя свойство border-image-slice:

element {
  border-image-slice: 19;
}

Это свойство задает внутренние смещения от верхней, правой, нижней и левой стороны. Смещения разделяют изображение на 9 областей: четыре угла, четыре стороны и посередине:

Свойство border-image-slice

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

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

Числа обозначают пиксели изображения, или координаты в случае, если это векторное изображение. Не добавляйте px после числа – в этом случае свойство не будет работать.

Вот как вы можете использовать border-image-slice:

<div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>
.box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-bg.png);
  border-image-slice: 19; 
}

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

Свойство border-image-slice - 2
Свойство position

мы получим что-то выглядящее вот так:

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

Например, использовав изображение с непрозрачной центральной областью, вы получите такой же результат, как на рисунке выше.

Применив ключевое слово fill следующим образом:

.box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-fill.png);
  border-image-slice: 19 fill;
}

с изображением, содержащим в центральной области детализированный контент:

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

Свойство border-image-width

Это свойство задает площадь границ рамки. По умолчанию, границы этой области совпадают с границами блока рамки. Так же, как и свойство border-image-slice, border-image-width задает внутренние смещения, которые разделяют изображение на девять областей.

Это свойство принимает до четырех значений (смещение сверху, справа, снизу и слева), число или процентное значение.

Проценты задаются относительно области изображения рамки (по ширине для горизонтальных смещений и высоте для вертикальных смещений). Если вы используете числа без указания px, это будет приравниваться к умножению соответствующего значения border-width. Например, следующий код:

box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-bg.png);
  border-image-slice: 19;
  border-image-width: 3;
}

... устанавливает ширину изображения рамки в три раза больше значения border-width, которое равно 19 пикселям. В результате получится что-то наподобие этого:

Свойство border-image-width
CSS: заглавные буквы

Я пришла к выводу, что определение для свойств border-image-width и border-image-slice одинаковых значений обеспечивает наилучшее отображение рисунка рамки без искажений.

Свойство border-image-outset

Рассмотренные нами свойства используются для вставки изображения рамки внутрь блока рамки. Но мы можем сдвинуть область изображения рамки за пределы блока с помощью свойства border-image-outset.

Это свойство принимает до четырех значений (смещение сверху, справа, снизу, слева) выражаемых в единицах длины: как пикселях, так и Em. Если вы используете число, изображение рамки будет смещено за пределы границы рамки на величину, кратную значению border-width.

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

Свойство border-image-outset

Добавление правила border-image-outset: 19px; приводит к тому, что розовое изображение выводится за пределы зеленого пунктирного контура:

Свойство border-image-outset - 2

При размещении изображения рамки вне блока рамки, оно не охватывается прокруткой элементов и событиями мыши.

Свойство border-image-repeat

Это свойство предлагает несколько вариантов отображения фонового изображения рамки по сторонам и в средней части рамки. Первое значение применяется к горизонтальным сторонам (сверху и снизу), а второе значение к вертикальным (справа и слева). Если вы установите только одно значение, оно будет применяться и к горизонтальным, и к вертикальным сторонам.

Допустимые значения:

  • stretch - значение по умолчанию, если вы не используете свойство border-image-repeat. Растягивает изображение, чтобы оно заполняло всю доступную площадь;
  • repeat - изображение повторяется, чтобы заполнить всю доступную площадь. Изображение может отображаться не полностью, если доступная площадь не может быть заполнена по ширине кратное количество раз;
  • round - то же самое, что repeat, но если доступного пространства недостаточно, чтобы вместить копии изображения рамки без обрезки, они растягиваются, пока не будут подогнаны соответственно. Фрагменты плитки никогда не обрезаются, но могут выглядеть немного искаженными;
  • space - то же самое, что repeat, но если доступное пространство не может вместить кратное количество копий, оставшееся пустое пространство равномерно распределяется между всеми фрагментами.

На момент написания данной статьи Firefox выводит space так же, как stretch, а Chrome выводит space так же, как repeat.

Свойство border-image

Вы можете использовать все свойства, описанные выше, в свойстве border-image следующим образом:

  1. border-image-source;
  2. border-image-slice;
  3. border-image-width;
  4. border-image-outset;
  5. border-image-repeat.

Ниже приводится фрагмент кода:

element {
  border-image: url(myimage.png) 19 / 19px / 0 round;
}

Поэкспериментируйте с примерами кода свойства border-image-repeat и border-image на странице CodePen.

Что, если я хочу удалить изображение рамки?

Лучший способ сбросить все настройки - использовать свойство border. С помощью него вы можете быстро переустановить одинаковую ширину, цвет и стиль для всех четырех сторон элемента. Вам не нужно указывать правило border-image:none, как и переопределять каждое из отдельных свойств border-image.

Поддержка браузерами

На момент написания данной статьи свойства border-image поддерживаются во всех основных браузерах. Только Firefox не может растягивать SVG-изображения в пределах элемента, а Opera Mini поддерживает сокращенный синтаксис с префиксом -o-, но не отдельные свойства.

Заключение

В этой статье я подробно рассказала о свойстве border-image: значениях, которые оно принимает, о том, как лучше его использовать, и об уровне поддержки браузерами на момент написания статьи.

Более подробную информацию вы можете найти в спецификации CSS Backgrounds and Borders Level 3.

С нетерпением жду ваших отзывов!