Свойство border-image — Как сделать графическую границу

border-image-1

Итак, мы продолжаем серию статей по CSS. В предыдущей статье мы с Вами рассмотрели применение CSS свойств границы (border) элементов страницы. И я обещал Вам, что расскажу о том, как использовать для прорисовки границ — картинки. Об этом и пойдет сегодня речь.

Чтобы использовать изображения для построения границ будем использовать CSS cвойство border-image.

Толщина границ задается свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

Синтаксис кода

Давайте разберем пример записи свойства:

border-image: url(images/bg-image.png) 30 round round;

url (images/bg-image.png) — адрес фоновой картинки.

30 — может быть одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселах, задавая тем самым области деления картинки. Сами единицы не пишутся, только число (10, а не 10px). На рисунке красными линиями выделены необходимые для создания рамки области.

css_border-image-2

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

Число значений Результат
1 Устанавливает границы одинаковой толщины на каждой стороне рисунка.
2 Первое значение устанавливает толщину верхней и нижней границы, второе — левой и правой.
3 Первое значение определяет толщину верхней границы, второе — левой и правой, а третье — толщину нижней границы.
4 Поочередно устанавливается размеры верхней, правой, нижней и левой границы.

round round — два параметра (для горизонтальных и вертикальных границ соответственно). Могут принимать одно из трех значений. Результат можно увидеть на картинках.

border-image-3

stretch — Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat — Повторяет рисунок границы.
round — Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Совместимость с браузерами

К сожалению, не все версии браузеров поддерживают свойство border-image. Для лучшей совместимости желательно прописать свойство для всех браузеров.

Пример кода:

border-style: solid;
border-width: 27px;
-moz-border-image: url(http://mysite.ru/border.png) 27 round stretch;
-webkit-border-image: url(http://mysite.ru/border.png) 27 round stretch;
-o-border-image: url(http://mysite.ru/border.png) 27 round stretch;
border-image: url(http://mysite.ru/border.png) 27 round stretch;

Автоматизация

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

Причем, сразу же, в онлайн режиме видите результат (то, что получится в итоге).

Когда добиваетесь неодходимого результата, Вам остается только скопировать сгенерированный код и вставить его в код страницы (файла css).

Очень просто и удобно.

Заключение

На этом мы заканчиваем рассмотрение свойств границ в CSS. Я с Вами не прощаюсь. В ближайшее время мы продолжим обучение верстке. Подписывайтесь на обновления... и... До встречи!

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии запрещены.