Деление рисунка для рамки на области. Свойство border-image-slice


Содержание

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

В CSS свойство border-image-slice используется для разделения или среза изображения, указанного в свойстве border-image-source .

Свойство border-slice разделяет данное изображение на:

  • 9 регионов
  • 4 угла
  • 4 ребра
  • Средний регион.

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

Ниже изображение иллюстрирует области, упомянутые выше:

  • Области 1, 3, 7, 9 являются угловыми регионами.
  • Области 2, 4, 6, 8 являются краевыми областями.
  • Регион 5 — это средний регион.

Синтаксис:

значения свойства border-image-slice

Значение Эффект / Функциональность
Число Представляет смещение края в пикселях для растровых изображений и координаты для векторных изображений ( см. Вектор против растровой графики)
процент Представляет смещение края в процентах от размера исходного изображения: ширина изображения для горизонтальных смещений, высота для вертикальных смещений.
заполнить Заставляет среднюю область отображаться как фоновое изображение.
начальный Инициализирует свойство к его значению по умолчанию.
унаследовать Унаследует значение свойства от его родительского элемента.

Ниже программа иллюстрирует свойство border-image-slice:

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

Свойство border-image-slice — задает отступы сверху, справа, снизу и слева, которые надо отступить для разделения фонового изображения на части.

В результате имеем 9 фрагментов фонового изображения: 4 угла (эти фрагменты вставляются без изменений), фрагмент для верхней границы элемента, для правой границы, нижней и левой (могут растягиваться, повторяться и т.д. в зависимости от заданных стилей и размеров блока), а также центр картинки (по умолчанию считается прозрачным и нигде не отображается).

разделение рисунка на части рамки

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

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

  • — количество пикселей, которое надо отступить от края (если изображение растровое) или координата линии разреза (если изображение векторное)
  • — значение отступа в процентах.
  • fill — добавочное значение, означающее, что надо сохранить среднюю часть рисунка (по умолчанию она отбрасывается, т.е. считается пустой).
Значение по умолчанию 100%
Применимо ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

Твой код:
Результат:

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

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

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

Свойство border-image-outset позволяет отодвинуть рамку за пределы элемента. В качестве значения указывается число без указания единиц измерения либо любые единицы для размеров, кроме процентов. Если указано число без единиц, то оно является множителем, на который умножается значения свойства border-width. Отрицательные значения не поддерживаются.

Для более подробной информации по картинкам для границы смотрите свойство border-image.

Синтаксис

Пример . Число

Установим значение border-image-outset в 3 по наведению мышкой на элемент. При этом граница сдвинется на 26px*3 — в 3 раза дальше, чем ее ширина, заданная в border-width:

CSS Border Images

Изображения границ CSS

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


CSS граница-свойство изображения

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

Недвижимость имеет три части:

  1. Изображение, используемое в качестве границы
  2. Где разрезать изображение
  3. Определите, должны ли средние сечения повторяться или растягиваться

Мы будем использовать следующее изображение (под названием «border.png»):

Свойство border-image принимает изображение и нарезает его на девять секций, например, на доске Tic-Tac-Toe. Затем он помещает углы по углам, а средние секции повторяются или растягиваются, как вы укажете.

Примечание: Для работы border-image элементу также требуется набор свойств border !

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

Изображение как граница!

Пример

Здесь, средние участки изображения растягиваются, чтобы создать границу:

Изображение как граница!

Пример

Совет: Свойство border-image фактически является сокращенным свойством для свойств border-image-source , border-image-slice , border-image-width , border-image-outset и border-image-repeat .

Граница CSS-изображение-различные значения среза

Различные значения среза полностью изменяют внешний вид границы:

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

Свойство border-image-slice определяет, как разделить изображение, указанное в свойстве border-image-source , на девять частей: четыре угла, четыре края, середина. «Средняя» часть является полностью прозрачной, если не установлено значение «fill».

Свойство border-image-slice имеет три значения: number, percentage и fill. Number указывает на смещение краев в пикселях для растрового изображения и на координаты для векторного изображения. Percentage определяет смещение краев в виде процентов оригинального размера изображения. При значении fill, средняя часть изображения отображается в виде фонового изображения.

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

Значение по умолчанию 100%.
Применяется Ко всем элементам, а также к ::first-letter .
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.borderImageSlice = «10

Синтаксис

Пример

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

Пример

Пример, где первое значение установлено с помощью percentages, а второе с помощью «fill».

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

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

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

CSS синтаксис

Возможные значения

Значение Описание
число Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселах (если растровое изображение) или координатах (если векторное изображение), задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px).
% Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
fill Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем как разделять изображение-рамку

Деление рисунка для рамки на области. Свойство border-image-slice

Internet Explorer 11 поддерживает определение пользовательских изображений для границ с помощью свойства border-image из спецификации модуля фонов и границ CSS уровня 3 консорциума W3C. С помощью свойства border-image вы можете определить для границ собственные изображения вместо классических стилей.

Свойство border-image

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


Указывает расположение изображения, которое будет использоваться для границы.

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

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

Указывает величину, на которую изображение для границы выходит за пределы рамки границы.

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

Определение, разбиение и повторение изображения

При использовании border-image вы должны сначала указать значения стиля границы. Ниже показан элемент div со сплошной черной границей шириной 15 пикселей. Черная область — это рамка, или область границы. Здесь будет по умолчанию помещено изображение для границы. Эта область настраивается указанием значений для border-image-width и border-image-outset.

Рисунок ниже (с прозрачным фоном) имеет размер 81 x 81 пиксель и используется как изображение для границы в следующем примере.

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

Числа после источника изображения в показанном выше коде CSS определяют расстояния до элементов изображения ( border-image-slice). В этом примере расстояние до элементов составляет 27 пикселей от верхнего, правого, нижнего и левого краев изображения. Эти расстояния выделены красным на следующем рисунке.

Значения round и stretch определяют, как изображения заполняют область между границами ( border-image-repeat). Первое значение, round, применяется к горизонтальным сторонам. Изображение располагается мозаикой или повторяется, пока не заполнит область между краями границы. Если заполнить область целым числом элементов мозаики не удается, изображение масштабируется повторно таким образом, чтобы целое число элементов заполнило область. Второе значение, stretch, применяется к вертикальным сторонам. В этом примере изображение растягивается так, чтобы заполнить область между краями границы. Stretch — это значение по умолчанию.

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

В этом примере заданные расстояния до элементов составляют 20 пикселей от верхнего и нижнего краев и 15 пикселей от левого и правого краев изображения. В этом примере вместо значения по умолчанию для border-image-repeat используется значение round.

Указание значений ширины и начала

Используя свойство border-image-width, вы также можете указать значения ширины и высоты изображения для границы с помощью определения смещений внутрь от краев области изображения для границы. Значение по умолчанию для Border-image-width равно 1. Это значит, что border-image-width кратно вычисленному значению свойства border-width или ширине рамки границы. В примере выше показан элемент div, у которого свойство border-image-width имеет значение 1, а ширина изображения для границы составляет 15 пикселей (1 умножить на значение свойства border-width, равное 15 пикселям). На следующем изображении показан результат использования того же кода CSS со свойством border-image-width, значение которого составляет 20 пикселей. В этом примере вы определяете смещение внутрь на 20 пикселей от краев области изображения для границы.

Код CSS для показанного выше элемента div выглядит так:

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

Код CSS для показанного выше элемента div выглядит так:

Деление рисунка для рамки на области. Свойство border-image-slice

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

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

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

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

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

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

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

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

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

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

Repeat, Round, Stretch

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

Border-width

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

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

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

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

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

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


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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

CSS Border Images

Изображения границ CSS

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

CSS граница-свойство изображения

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

Недвижимость имеет три части:

  1. Изображение, используемое в качестве границы
  2. Где разрезать изображение
  3. Определите, должны ли средние сечения повторяться или растягиваться

Мы будем использовать следующее изображение (под названием «border.png»):

Свойство border-image принимает изображение и нарезает его на девять секций, например, на доске Tic-Tac-Toe. Затем он помещает углы по углам, а средние секции повторяются или растягиваются, как вы укажете.

Примечание: Для работы border-image элементу также требуется набор свойств border !

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

Изображение как граница!

Пример

Здесь, средние участки изображения растягиваются, чтобы создать границу:

Изображение как граница!

Пример

Совет: Свойство border-image фактически является сокращенным свойством для свойств border-image-source , border-image-slice , border-image-width , border-image-outset и border-image-repeat .

Граница CSS-изображение-различные значения среза

Различные значения среза полностью изменяют внешний вид границы:

Илон Маск рекомендует:  Поиск в бинарных деревьях
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL