Border css картинкой – html — Use border image only for bottom border? Our CSS seems to replicate the image across the whole div instead

Еще раз про border-image — CSS-LIVE

Хотя свойство border-image уже поддерживают более 96% браузеров (с оговорками, но всё же), популярным пока его не назовешь. Пожалуй, поначалу оно кажется неоправданно сложным: объединяет в себе 5 отдельных свойств, каждое с несколькими значениями, да еще неочевидные правила взаимодействия с обычным border — легко запутаться. Даже многие неплохие руководства (типа статьи Дадли Стори, которую мы переводили в прошлом году) грешат тем, что даже после них ощущение сложности не проходит.

Есть мнение, что его сложность преувеличена, а возможности недооценены. Попробуем исправить это упущение.

0. border-image = border + image

Название свойства состоит из двух слов: «рамка» и «картинка». Вокруг них всё и вертится. Интуитивно его действие можно представить в виде примерно такого алгоритма:

1. Берем картинку.
2. Вырезаем из этой картинки рамку.
3. Заготавливаем «каркас» рамки по размерам нужного блока. Если надо, подгоняем ее толщину, положение краев и т.д.
4. «Натягиваем» вырезанную часть картинки на этот «каркас».

В таком ракурсе мы его сейчас и рассмотрим.

1. Картинка: border-image-source

В теории, картинка может быть чем угодно, что относится к типу CSS-значения «image» (описано в модуле значений изображения и замещаемого содержимого 3 уровня). Это может быть растровая картинка (отдельный файл или data uri) и SVG-картинка (отдельный файл, base64 или прямо SVG-код с минимально заэкранированными спецсимволами!). Или CSS-градиент. И даже любой элемент страницы — благодаря функции element(). Конечно, не всё из этого поддерживается во всех браузерах, но с растровыми картинками, SVG и градиентами давно почти везде нет проблем, а этого для типичных задач хватает с избытком.

С векторными картинками и градиентами есть пара нюансов:

1. Не у каждой картинки есть конкретные размеры. Соответственно, не из каждой картинки можно вырезать рамку, задавая ей размеры в пикселях. С градиентами вообще лучше всегда работать в процентах.
2. Градиент может быть только один. Неприятный сюрприз по сравнению с фонами: если фоны у нас множественные, благодаря чему можно собирать целые паттерны из нескольких слоёв разного размера и положения, то здесь нам фактически доступен лишь один такой слой. Так что паттерны из градиентов в border-image использовать нельзя.

Точнее, было нельзя до недавних пор. Несколько недель назад CSS-волшебница @yoksel открыла для нас новый секретный уровень CSS. Если задать для border-image SVG-картинку с инлайновыми стилями, внутри них может быть много чего интересного, включая паттерны из нескольких градиентов. Но будьте внимательны, такая магия требует мастерства и глубокого понимания происходящего! Иначе можно сломать мозг себе и браузеру.

Я не волшебник, только учусь, так что меня пока хватило только на такую небольшую вариацию:

See the Pen три градиента в border-image by Ilya Streltsyn (@SelenIT) on CodePen.

2. Вырезка рамки: border-image-slice

Наша картинка разделяется на 9 «плиток». 8 внешних (4 угловых и 4 боковых) — по сути и есть рамка. А центральная «плитка» либо выбрасывается, либо (если задать ключевое слово fill) заполняет рамку изнутри, как фон.

«Линии разреза» задаются значениями свойства border-image-slice. Если присмотреться, оно очень похоже на обычный border-width! Те же 1–4 значения через пробел, тот же порядок (по часовой стрелке, верх-право-низ-лево), тот же смысл сокращенных записей (3 значения — верх, одинаковые бока и низ, 2 значения — верх-низ и бока, 1 значение — одинаковая толщина со всех 4 сторон). Только единицы измерения другие: либо проценты (от размеров картинки), либо безразмерные «единицы системы координат картинки». Для растровой картинки это ее «родные», исходные пиксели. Так что ни те, ни другие единицы никак не зависят от экрана, масштаба и т.п.

Не так интуитивно, когда суммарная толщина противоположных сторон рамки становится больше размера картинки. Тогда разные угловые «плитки» пересекутся — какая-то часть картинки окажется сразу на нескольких из них. Это легче представить как то, что исходной картинки у нас было 4 экземпляра, и из каждого щедро вырезали по углу. Плиток нулевого и отрицательного размера не бывает, поэтому при такой «нарезке» центральная «плитка» и пара боковых исчезают, остаются лишь угловые. В пределе, при border-image-slice:100% — странно, но это значение по умолчанию — этими оставшимися угловыми «плитками» станет вся картинка целиком.

Лучше увидеть и «пощупать» это вживую:

3. Тонкая настройка: border-image-width и border-image-outset

Художественные эффекты, включая рисованные рамки, часто требуют настройки с точностью до пикселя. У border-image целых две «степени свободы» для этого.

Итоговая толщина рамки: border-image-width

С помощью border-image-width можно регулировать окончательную толщину рисованной рамки, совсем как с border-width — толщину обычной. Можно указывать толщину сторон рамки в обычных единицах длины (px, em, vh…), и эти стороны отмасштабируются до указанного значения (составляющие ее «плитки» сожмутся или растянутся поперек, угловые плитки масштабируются по обеим осям независимо). Но у него бывают еще три типа значений:

• безразмерные коэффициенты — за единицу берется толщина соответствующей стороны обычного border-width.
• проценты. Да-да, проценты для рамки! Чисто визуальной, но всё же. Считаются от общего размера рамки (с учетом того, что она может выступать за края блока, см. ниже).
• ключевое слово auto — используется исходный размер соответствующих «плиток», т.е. соответствующее значение из border-image-slice.

Значение по умолчанию — как раз безразмерное 1: рисованная рамка масштабируется до толщины, заданной обычному border-у. Иногда, если нужно просто «залить рамку текстурой», это логично. Но часто удобнее задавать border и border-image-width по отдельности. Если же не указать ни того, ни другого, рамка не появится вообще (ее толщина будет нулевой).

Удобное значение auto: сколько пикселей «вырезали» из картинки, такую толщину рамки и получили, ничего не искажается. Есть нюанс: border-image-width считается в обычных CSS-пикселях, а border-image-slice — в исходных пикселях картинки. Поэтому на Retina-экранах при auto растровая картинка может «мылить». Чтобы сделать рамку двойной четкости из картинки двойного размера, придется явно указывать для border-image-width половины значений border-image-slice (т.е. вдвое уменьшать исходные «плитки»).

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

See the Pen Автомасштабирование border-image до размеров контейнера by Ilya Streltsyn (@SelenIT) on CodePen.

Примечание: работа над этим примером заставила меня осознать беспощадный факт, что составляющие border-image не анимируются. Выручил JS. Зато как минимум в Firefox внутри SVG-картинок в border-image работают SMIL-анимации!

Вынос рамки за габариты блока: border-image-outset

Это уже интереснее: рисованная рамка может выступать за края блока наружу, на внешние отступы и даже на соседние элементы! Редкая в CSS возможность (еще разве что тени да позиционированные псевдоэлементы так умеют). Бывает полезно для вычурных дизайнерских виньеток с веточками/лучиками/тентаклями/любыми др. выступающими деталями. Или для «хвостиков» от «балунов» прямой речи, которыми любят оформлять отзывы и комментарии. Причем выступает она чисто визуально, на блочную модель это не влияет (габариты блока по-прежнему считаются по краям обычного border-а).

По механизму border-image-outset похож на margin. Только наоборот: положительные значения — сдвиг наружу. Кроме обычных единиц длины, тоже можно указывать безразмерные множители для border-width. А вот проценты почему-то нельзя. Сдвигать края внутрь, к сожалению, тоже нельзя (отрицательные значения запрещены), но обычно и не нужно. По умолчанию значение 0 — без сдвига, край рамки совпадает с краем блока.

Эти два свойства отлично работают вместе, если надо точно состыковать с контентом дизайнерскую рамку типа такой:

See the Pen GjxVmp by Ilya Streltsyn (@SelenIT) on CodePen.

А заодно обеспечить ей по-настоящему изящную деградацию.

4. «Натяжка» рамки на «каркас»: border-image-repeat

Теперь, когда известны окончательные размеры рамки, пора замостить эту область «плитками». Это работа свойства border-image-repeat. Общий принцип — угловые «плитки» просто разносятся по углам, а боковые заполняют оставшееся между углами пространство, для чего с ними что-то делается. Варианты, что именно делать, такие:

1. stretch (по умолчанию) — растянуть (или сжать) боковые «плитки» до заполнения оставшегося места, с искажением пропорций. Как будто рамка, которую мы вырезали из картинки, была резиновая, и мы приклеиваем ее к «каркасу» за углы.
2. repeat — размножить «плитку» и замостить ей это пространство. Как фон c background-repeat: repeat (и background-position по центру стороны). Пропорции сохранятся, но аккуратных стыков с углами никто не гарантирует.
3. round — размножить и исказить пропорции чуть-чуть — настолько, чтобы в нужное пространство влезло целое число копий «плитки». Тогда стыки с углами будут такими же аккуратными, как на исходной картинке.
4. space — не искажать пропорции, а взять столько копий, сколько поместится, а оставшееся свободное место поровну «раскидать» вокруг них. Увы, работает пока только в IE11/Edge и Safari 9.1+ (но вот-вот начнет в Firefox 50+).

Можно задать разные значения для горизонтальных и вертикальных сторон (напр. stretch round) или одно значение для всех 4-х. Центральная плитка по каждому измерению ведет себя так, как соответствующие боковые (например, может размножаться по вертикали и растягиваться по горизонтали).

Особых сложностей тут не видно, поэтому ограничимся простейшим примером:

See the Pen PGarao by Ilya Streltsyn (@SelenIT) on CodePen.

На мой взгляд, самые полезные значения — stretch (для сплошных, «монолитных» рамок) и round (для повторяющихся орнаментов).

5. Итого

Сокращенная запись свойства border-image, по спецификации, записывается практически как наш алгоритм:

border-image: <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>

т.е., в переводе на человеческий: что за картинка — пробел — как ее резать — слеш — какой толщины делать рамку — слеш — насколько выдвигать ее за края — пробел — как натягивать «плитки». Части border-image-width и border-image-outset необязательны. Что именно из них пропущено, определяется по количеству слешей перед оставшимся. Например, в border-image: url(img.png) 50 / 25px round значение 25px — это толщина рамки (до него один слеш), а в border-image: url(img.png) 50 / / 25px stretch — это выступ за края (до него два слеша). Но «что резать», «как резать» и «как растягивать» указывать нужно (первое — по стандарту, остальное — по здравому смыслу).

Cледующий пример — набросок своего рода «песочницы» для этого свойства. Пробуйте загружать или задавать кодом свои картинки и градиенты, менять значения и единицы, смотрите на результат и… копируйте итоговое значение. Надеюсь, из этого получится неплохое дополнение к старому доброму border-image.com:)

See the Pen Конструктор border-image by Ilya Streltsyn (@SelenIT) on CodePen.

И несколько слов о поддержке браузерами. С ней всё хорошо: полностью выпадает лишь IE10 и ниже. Без значения space для border-image-repeat, по-моему, жить можно.

Правда, на CanIUse есть загадочное примечание (про WebKit и Edge 13), которое чуть не сбило меня с толку: «Есть баг, что border-image неправильно перекрывает border-style». Каково же было мое удивление, когда я обнаружил, что все браузеры «перекрывают» компоненты обычного border-а по-разному! Safari в iOS 10 не рисует картинку при border-width: 0, Edge 14 — при border-style: none, Хром (включая Canary 56) — при обоих. А вот Firefox (и IE11, что интересно) рисуют картинку несмотря ни на что, хотя о баге в них не сказано!

После раскопок в спецификациях и консультаций с умными людьми я выяснил, что поведение FIrefox (и IE11) правильное. Это подтверждают официальные тесты к спецификации. По стандарту, составляющие обычного border не должны влиять на border-image чем-либо еще, кроме как через дефолтное значение border-image-width (причем его легко «отвязать», задав конкретное значение). Неразбериха возникла из-за двусмысленной фразы в спецификации, что «при нулевом border-width рамка считается отсутствующей» (без уточнения, идет ли речь только об обычной или о картиночной тоже), а также из-за проблем совместимости со старыми префикснутыми реализациями и гугловским календарем:). Ради совместимости с Хромом, видимо, сломали и Edge. Впрочем, «лекарство» — явно указать, например, border-style: solid и ненулевой border-width — элементарно. К тому же они наверняка всё равно понадобятся для изящной деградации.

И еще две хорошие новости и одна плохая. Хорошая №1 — border-image работает в Опере Мини! Так что его поддержка чуть ли не лучше, чем у border-radius). Хорошая №2 — на сегодня это единственный браузер, которому нужен префикс. И чуть ли не единственный случай, где это префикс -o-. Даже префикс -webkit- уже не актуален! А плохая новость в том, что Опера Мини поддерживает только сокращенное свойство целиком (нельзя задавать, скажем, border-image-slice и border-image-width по раздельности) и не понимает в border-image-repeat не только странного space, но и полезного round.

P.S. Это тоже может быть интересно:

Что такое border-image? | CSS-Tricks по-русски

Что такое border-image?

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

Основная идея

Сокращённая запись свойства состоит из трёх частей:

border-image: url(border-image.png) 25% repeat;

Таким образом, вы можете указать:

1. Файл с изображением, которое будет использоваться для границы;
2. Каким образом разбивать изображение при показе, изображение разбивается на 9 частей;
3. Каким образом браузер должен применять каждую часть изображения к соответствующим частям элемента.

Необходимые подробности

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

Разбиение изображения

Вторая часть может иметь от одного до четырёх значений, как например свойство border-width, которые применяются в привычном нам порядке: top, right, bottom и left.

border-image: url(my-image.gif) 25% 30% 10% 20% repeat;
border-image: url(my-image.gif) 25 30 10 20 repeat;

В нашем случае, поскольку изображение размером 100px x 100px, два правила из примера эквивалентны — картинка будет разбиваться на части в одних и тех же местах. Я добавил разметку на рисунок, чтобы продемонстрировать это:

Repeat, Round, Stretch

Свойство border-image всегда располагает угловые секции вашего изображения в соответствующие углы вашего элемента. Третья часть правила говорит браузеру как расположить средние секции вашей картинки, как они будут вести себя на границах элемента. Значения repeat (повторять часть изображения) и stretch (растягивать) говорят сами за себя. Значение round подразумевает что картинку надо повторять, но только целое количество раз, если же осталось свободное пространство, то результат надо растянуть. Однако Safari и Opera интерпретируют round также как и repeat. Всего может быть два значения, для верхней и нижней границ, а также для левой и правой. Рассмотрим пример, в котором значения для верхней и нижней границ установлено в repeat, а для левой и правой в stretch:

#example-one {
	border-width: 25px 30px 10px 20px;
	-moz-border-image: url("border-image.png") 25 30 10 20 repeat stretch;
	-webkit-border-image: url("border-image.png") 25 30 10 20 repeat stretch;
	border-image: url("border-image.png") 25 30 10 20 repeat stretch;
}

Результат:

Border-width

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

#example-two {
	border: 50px double orange;
	-moz-border-image: url("border-image.png") 25 30 10 20 repeat;
	-webkit-border-image: url("border-image.png") 25 30 10 20 repeat;
	border-image: url("border-image.png") 25 30 10 20 repeat;
}

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

#example-three {
	border-color: orange;
	border-style: double;
	border-width: 25px 30px 10px 20px;
	-moz-border-image: url("border-image.png") 25 30 10 20 repeat;
	-webkit-border-image: url("border-image.png") 25 30 10 20 repeat;
	border-image: url("border-image.png") 25 30 10 20 repeat;
}

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

Особенности браузеров

Как и ожидалось, IE не поддерживает это свойство. Браузеры, которые поддерживают border-image, на самом деле поддерживают только короткую его запись и не все свойства, которые описаны в спецификации. Некоторые полезные свойства не поддерживаются всеми браузерами, например border-image-outset, которое бы решило вот эту проблему.

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

Однако на сегодня, браузеры всегда оставляют центральную часть изображения, и не существует способа убрать её. Таким образом, если вы не хотите чтобы у html-элемента был установлен фон, то центральная часть картинки должна быть пустой. Но также вы можете использовать это поведение, чтобы создать элемент с красивыми границами и фоном.

Пример

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

CSS. Border-image, о котором вы, возможно, не знали

Свойство border-image существует в css3 уже довольно давно, но пользоваться им, как ни странно, или не привыкли, или не пробовали очень многие. Давайте это исправим и познакомимся с border-image поближе.

Описание свойства border-image состоит из трех частей:

border-image: url(border-image.png) 25% repeat;

Это позволяет специфицировать следующее:

1. Непосредственно изображение, которое будет использовано в border’е
2. Где нарезать это изображение
3. Каким образом браузер будет использовать эти секции при рендере

Давайте рассмотрим каждую секцию более подробно. Первая часть легка для понимания, она знакома по свойству background-image. Для демонстрации остального будем использовать следующее изображение 100×100 пикселей:

Вторая часть выражения может иметь от одного до четырех значений, почти как border-width, а специфицируются они в следующем порядке:

В качестве единиц измерения можно использовать проценты или пиксели. При этом есть интересная особенность, для описания в процентах обязательно использовать знак «%», в то время как для пикселей обозначение «px» не обязательно.

border-image: url(my-image.gif) 25% 30% 10% 20% repeat;

border-image: url(my-image.gif) 25 30 10 20 repeat;

Как мы уже установили, размеры изображения 100×100 пикселей, так что в обоих случаях выше оно будет нарезано в одних и тех же местах. Для лучшего понимания, посмотрите на изображение с наглядными замерами:

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

Возможные свойства repeat (повторять) и stretch (растянуть) – говорят сами за себя.

Свойство round – своего рода комбинация repeat и stretch – означает, что изображение будет повторяться целое количество раз, а остаток пространства будет заполнен за счет растягивания этих кусочков.

element {
  border-width: 25px 30px 10px 20px;
  border-image: url("border-image.png") 25 30 10 20 repeat stretch;
}

В этом примере для top/bottom установлено значение repeat, а для left/right – stretch.

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

element {
  border: 50px double orange;
  border-image: url("border-image.png") 25 30 10 20 repeat;
}

Так же можно специфицировать ширину для каждого border’а:

element {
  border-color: orange;
  border-style: double;
  border-width: 25px 30px 10px 20px;
  border-image: url("border-image.png") 25 30 10 20 repeat;
}

Предсказуемо, в наши дни с border-image у вас возникнут проблемы только в IE. Однако, чтобы предупредить некоторые проблемы со средней частью border’а, следует определять свойство border-image-slice со значением fill: по умолчанию, средняя часть border-imgae, может отбрасываться, border-image-slice: fill позволяет этого избежать (см. спецификацию)

Скрытые возможности CSS: 10 полезных советов

21 совет профессионалов в CSS

Свойство border-image | CSS справочник

Определение и применение

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

В настоящее время браузер Chrome не отображает изображение-границу если у элемента не задано свойство border.

Если в объявлении не были указаны значения одного из вышеприведенных свойств, то оно устанавливается в значение по умолчанию.

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

CSS синтаксис:

border-image:"source slice / width / outset / repeat | initial | inherit";

/* Обратите внимание, что если вы добавляете в одно объявление свойства width или outset, то обязательно надо указывать слэш после slice и после этого значения. */
border-image:"url(ramka.png) 350 1-4 value + fill / 10px 1-4 value / 7px 1-4 value/ round 1-2 value";

JavaScript синтаксис:

object.style.borderImage = "url(border.png) 50 stretch"

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование изображения в качестве границы</title>
<style> 
div {
width : 150px; /* устанавливаем ширину блока */
height : 50px; /* устанавливаем высоту блока */
padding : 50px; /* устанавливаем величину внутреннего отступа элемента */
border : 55px solid transparent; /* прозрачная сплошная граница размером 55px */
border-image : url(ramka.png) 100 round; /* указываем путь к изображению, устанавливаем смещение 100px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.  */
}
</style>
</head>
	<body>
		<div class = "test">Ваш текст</div>
	</body>
</html>

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

Результат нашего примера:

Рассмотрим сл

Разбираемся с border-image из CSS3 — CSS-LIVE

Перевод статьи CSS3 Border-Image Explained с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Одно из самых мощных новых свойств CSS, border-image, которое к тому же ещё и имеет шикарную поддержку, за исключением (а теперь все вместе!) IE10 и более ранних версий. Но, к сожалению, также является одним из самых непонятных и сложных для понимания свойств.

Объяснение того, как работает border-image, возможно, лучше всего проиллюстрировать картинкой. Во-первых, давайте разберём любую рамку на составляющие: представим золочёную раму для картины, которая разделена на девять «плиток» двумя горизонтальными и двумя вертикальными линиями. На рисунке выше я пометил вертикальные разделительные линии, как V1и V2, а горизонтальные, как h2и h3.

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

Представим, что мы играем в Морской бой и обозначим каждую «плитку», созданную нашими разделительными линиями. К верхнему левому углу мы могли бы обратиться как A1, к правой средней части B3, и т.д. (Средняя часть — B2 — будет проигнорирована CSS, после того, как мы определим фрагменты для нашего изображения рамки.) Места размещения фрагментов предопределяют роли для наших «плиток». A3 всегда займет место изображения верхнего правого угла для нашей рамки; C2 будет использоваться для нижнего края, и т.д.

Давайте рассмотрим боковые стороны и верх нашей рамки, поскольку они находятся в довольно специфичных, притом изменчивых, условиях. Когда мы применяем рамку к  HTML-элементу, мы не знаем, какой величины будет бокс. После того, как эти условия применятся к рамке, угловые «плитки» не будут затронуты изменениями размера, но боковые стороны, а также верх и низ определённо изменятся. Нам надо решить, как должны вести себя «плитки», которые там будут размещены: будут ли они повторяться или вытягиваться, если бокс станет больше? Это решение относится к дизайну нашей рамки и поэтому и нам придется обозначить наш выбор при написании CSS.

Наконец, давайте подумаем о линиях, которыми созданы наши плитки: двух горизонтальных и двух вертикальных. Нам нужно сообщить CSS, где будут находиться эти воображаемые разделители, для того, чтобы он применил эту информацию для создания «плиток». Мы могли бы отсчитывать их положение либо в процентах либо в пикселях от углов. (Я бы сказал, что в большинстве случаев второе проще всего, кроме случая с SVG-картинками в качестве изображения рамки).

Заметьте, что шевроны на углах этой рамки означают, что фрагменты обязаны быть достаточно большими, чтобы включить те детали, которые увеличивают размер рамки и произведут эффект виньетки, как в настоящей раме, который на самом деле реалистичен для профессионально оформленной фотографии или картины. Я сделал внутреннюю часть рамки прозрачной, что означает, что background-color, который я указываю, будет просвечивать насквозь.

Способ, которым измеряется и вносится в объявление позиция разделителей, тоже странен: h3 отмеряется от низа изображения, h2 — от верха, V1— от левого края, а V2 — от правого. Они находятся в объявлении в таком порядке:

border-image: url(image) h2 V2 h3 V1

Как ни странно, когда значения вводятся в виде пикселов, за ними не следует суффикс «px», в отличие от почти всего остального в CSS.

Данное изображение под лицензией Creative Commons (снятое Энни Чартранд) вставлено на страницу при помощи этого кода

<img src="teracotta-statue.jpg" alt="Terracotta Statue" class="frame">

И учитывая верхнее изображение рамки, CSS, который мы могли бы применить к ней, был бы примерно таким:

img.frame {

border-image: url('frame.png') 93 92 87 92;

background-color: #ffe;

}

(Заметьте, что этот код пока ещё не работает: есть ещё несколько вещей, которые нужно добавить).

Есть несколько вариантов того, как будут обрабатываться стороны. stretch именно так и работает, repeat будет повторять «плитки», чтобы уместить их в доступную область, round — это гибрид обоих значений, который старается использовать для сторон полные варианты плиток, но растягивая их там, где необходимо.

Важно отметить, что вы также должны предоставить раздельное объявление border-width, чтобы сообщить браузеру какой ширины каждая сторона, чтобы изображения могли в них вместиться. Большинство источников скажут вам, что размеры, используемые в border-width, должны в точности совпадать с теми, которые используются для позиции фрагментов, т.е.:

border-width: 93px 92px 87px 92px;

Но я обнаружил, что с единственным значением border-width рамка по сути масштабируется:

border-width: 60px;

Помните, что в виде запасного варианта вам также нужна обычная рамка на случай, если изображение для «плиток» не загружается или посетитель использует IE: я бы предложил взять рамку толщиной примерно как плитки и воспользоваться ее преобладающим цветом, возможно, с каким-нибудь малоиспользуемым border-style впридачу.

Итак, полный код для эффекта, который показан в верху этой страницы, выглядит так:

img.frame {
border-image: url('frame.png') 93 92 87 92 stretch stretch; border-color:#f4be52; border-style: inset; border-width: 60px; width: 500px; height: 333px;background-color: #ffe; }

Советы по дизайну

Из-за неизбежного растяжения и деформации, которые должно претерпеть любое изображение, применяемое в border-image, я бы рекомендовал использовать PNG-изображения для рамок, где это возможно. PNG-24 также позволяет делать части плиток прозрачными, что очень важно, если вы используете большие украшения для каждого угла, как в нашем примере с золочённой рамой. Без прозрачности внутренних частей изображения наша рама рискует наложиться на что-нибудь из внутреннего содержимого бокса.

Восхитительно, что box-shadow продолжит работать так, как ожидалось. Конечно, тень отразит контур фигуры CSS-бокса, а не контур самой рамки; если внешняя сторона рамки неправильной формы, то вы могли бы создать реалистичную тень, используя настоящий CSS-фильтр падающей тени или подредактировав растровую картинку в таком редакторе, как PhotoShop.

Я бы также посоветовал использовать направляющие, инструмент «Выделение» и окно «Информация», чтобы измерять фрагменты. Мы делали похожую работу ранее – текст, огибающий фигуру и Семантические CSS3-спрайты (действительно, спецификации свойства clip  и border-image тесно связаны между собой). Ещё как вариант, можно использовать онлайн-инструмент Кевина Декера – «Генератор Border Image», чтобы создать CSS для вашей рамки.

P.S. Это тоже может быть интересно: